Membuat Tab Menu Simple Dengan jQuery

1. Pertama sekali buatkan 6 tab yang menampilkan data yang berbeza. Taipkan syntax html di bawah ini ke dalam tag body :

-----------------------------------------------------------------------------------------------------------------------
<div id="content">

2	<a href="javascript:navigate_tabs('a','tab-satu');" class="buttons">Mata Kuliah Wajib</a>

3	<a href="javascript:navigate_tabs('b','tab-dua');" class="buttons">Mata Kuliah Mengulang</a>

4	<a href="javascript:navigate_tabs('c','tab-tiga');" class="buttons">Mata Kuliah Khusus</a>

5	<a href="javascript:navigate_tabs('d','tab-empat');" class="buttons">Mata Kuliah Rekaan</a>

6	<a href="javascript:navigate_tabs('e','tab-lima');" class="buttons"">Mata Kuliah Jaringan</a>

7	<a href="javascript:navigate_tabs('f','tab-enam');" class="buttons">Mata Kuliah AI</a>

8

9	<div id="isi" class="a">

10	<h4>Mata Kuliah Wajib</h4>

11

</div>

12	<div id="isi" class="b" style="display:none;">

13	<h4>Mata Kuliah Mengulang</h4>

14

</div>

15	<div id="isi" class="c" style="display:none;">

16	<h4>Mata Kuliah Khusus</h4>

17

</div>

18	<div id="isi" class="d" style="display:none;">

19	<h4>Mata Kuliah Rekaan</h4>

20

</div>

21	<div id="isi" class="e" style="display:none;">

22	<h4>Mata Kuliah Jaringan</h4>

23

</div>

24	<div id="isi" class="f" style="display:none;">

25	<h4>Mata Kuliah AI</h4>

26

</div>

27

</div>

 ------------------------------------------------------------------------------------------------------------------------
2. Seterusnya  kita beralih ke javascript-nya., taippkan syntax javascript di bawah ini. Kerana kita memerlukan sebuah library/file jQuery, maka sila download dulu filenya di situ. (http://jquery.com/)

<script src="js/jquery.js" type="text/javascript"></script>

2	<script type="text/javascript">

3	function navigate_tabs(container, tab)

4

{

5	$(".a").css('display' , 'none');

6	$(".b").css('display' , 'none');

7	$(".c").css('display' , 'none');

8	$(".d").css('display' , 'none');

9	$(".e").css('display' , 'none');

10	$(".f").css('display' , 'none');

11

12	$("#tab-satu").removeClass('buttonHover');

13	$("#tab-dua").removeClass('buttonHover');

14	$("#tab-tiga").removeClass('buttonHover');

15	$("#tab-empat").removeClass('buttonHover');

16	$("#tab-lima").removeClass('buttonHover');

17	$("#tab-enam").removeClass('buttonHover');

18

19	$("#"+tab).addClass('buttonHover');

20	$("."+container).show('fast');

21

}

22

</script>

-------------------------------------------------------------------------------------------------------------------------
3. Boleh juga ditambahkan css, agar lebih menarik. Berikut style css yang digunakan dalam contoh kali ini :

body{

2	font-size:12px;

3	font-family:Arial;

4

}

5

.buttons{

6	padding: 5px 10px 10px 10px;

7	text-decoration:none;

8	color:#333333;

9	margin-left:1px;

10	background-image:url(images/bg-menu.jpg);

11	background-position:center;

12	border:1px solid #000000;

13	-moz-border-radius: 5px 5px 0px 0px;

14	-webkit-border-radius: 5px 5px 0px 0px;

15	z-index: 9999 ;

16	float:left;

17

}

18	.buttons:hover{

19	padding: 5px 10px 10px 10px;

20	text-decoration:none;

21	color:#FFFFFF;

22	background-image:url(images/spotlight-bg.png);

23	background-position:center;

24	border:1px solid #000000;

25	-moz-border-radius: 5px 5px 0px 0px;

26	-webkit-border-radius: 5px 5px 0px 0px;

27	z-index: 9999 ;

28	float:left;

29

}

30

#isi{

31	border:1px solid #333333;

32	width:100%;

33	float:left;

34	margin-top:1px;

35	padding:10px;

36

}

37

#content{

38	margin:0px auto;

39	width:940px;

40

}

41

h4{

42	margin:0px auto;

43	font-size:16px;

44	color:#FF3300;

45

}

--------------------------------------------------------------------------------

Posted by Hasnita Source:http://gedelumbung.com Date : 29 Oct 2014