Jquery ứng dụng - Tạo menu 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ẻ div tươ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>