Tạo menu với jquery

Ở bài học này tôi sẽ trình bày nội dung tạo một tab-menu đơn giản với jquery.

Tôi có đoạn mã HTML để tạo menu và các tab cho menu:

1 2 3 4 5 6 7 8 9 10

<ul>    <li><a href="#" thutu="0">HOME</a></li>    <li><a href="#" thutu="1">MENU</a></li>    <li><a href="#" thutu="2">CONTACT</a></li>    <li><a href="#" thutu="3">ABOUT</a></li> </ul> <div class="content" >THIS IS TAG DIV 1</div> <div class="content" style="display:none">THIS IS TAG DIV 2</div> <div class="content" style="display:none">THIS IS TAG DIV 3</div> <div class="content" style="display:none">THIS IS TAG DIV 4</div>

CSS : Tôi sẽ sử dụng thuộc tính : display:none; với các thẻ div để ẩn đi chính nó.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

body{    width: 609px;    margin: 0px auto; }   ul{   list-style: none;   margin: 0px;   padding: 0px;   height: 52px; }   li{   float: left; }   a{   display: block;   text-decoration: none;   background: #00AFF0;   height: 50px;   color: #fff;   line-height: 50px;   width: 150px;   text-align: center;   border: 1px solid blue; }   a:hover{   color: red;   background: orange;   font-weight: bold; }   .content{   width: 607px;   border: 1px solid blue;   height: 400px; }

Thao tác với jquery :Bài toán đặt ra : khi tôi hover vào các thẻ a có số thứ tự tương ứng thì sẽ show ra các thẻ divtương ứng và ẩn đi các thẻ div còn lại.

Giải quyết bài toán
Đặt thêm thuộc tính thutu="" cho các thẻ a. Thu viện jquery có hàm eq(số thứ tự) để gọi đến các thẻ có số thứ tự  = các số tự nhiên bắt đầu từ số 0. Trong bài toán này ta dùng nó để  gọi đến các thẻ div có số thứ tự tương ứng với thẻ a  có giá trị của thuộc tính thutu. 

 - Dùng hàm sự kiện hover cho các thẻ a: $("a").hover(fucntion() {}).
 - Khai báo biến thutu bằng hàm attr(): var thutu = $(this).attr("thutu");
 - Ẩn đi tất cả các thẻ  div có class="content" bằng hàm hide() : $(".content").hide();
 - Dùng hàm show để hiện ra thẻ div có thứ tự = "thutu" và có class="content " là

1	$(".content").eq(thutu).show();

Nhúng thư viện jquery vào web

1	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

Xử lý Jquery cho menu tab

1 2 3 4 5 6 7 8 9

<script type="text/javascript">      $(document).ready(function() {           $("a").hover(function() {              var thutu = $(this).attr("thutu");              $(".content").hide();              $(".content").eq(thutu).slideDown();           })      }) </script>