Tab đơn giản
Tab là plugin đơn giản dùng để xem nội dung giữa các block dễ hơn, nội dung cần thiết chỉ hiển thị khi được chọn, việc này giúp trang web gọn hơn và thân thiện với người dùng hơn.
Tab
Tab là dạng các thành phần mà khi click vào đó sẽ mở ra các nội dung tương ứng.
Trình duyệt
6
3
9
9
3
Html viết:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Học Web Chuẩn</title> <script src="https://hocwebchuan.com/example/js/jquery-1.8.3.min.js"></script> <script> /* Nội dung js của tab */ $(function(){ $(".tab a").click(function() { var elm = $(this); if (!elm.parent("li").hasClass("active")) { elm.parent("li") .siblings() .removeClass("active"); elm.parent("li").addClass("active"); elm.parents(".tab") .next() .children(".tabContents div") .hide(); $(this.hash).fadeIn(); } return false; }); }); </script> <style> * { /* reset lại margin và padding cho các tag */ margin: 0; padding: 0; } /* Nội dung css của tab */ .tab li { display:inline; float:left; margin-right:5px; } .tab a { display:inline-block; width:100px; border:1px solid #DDD; border-bottom:none; text-align:center; line-height:30px; text-decoration:none; } .tab .active a { border-bottom:none; color:#F00; } .tabContents { clear:both; width:90%; border:1px solid #CCC; } .tabContents div { display:none; padding:10px; } #tab01 { display:block; } </style> </head> <body> <div class="tabArea"> <ul class="tab clearfix"> <li class="active"><a href="#tab01">Tab 01</a></li> <li><a href="#tab02">Tab 02</a></li> <li><a href="#tab03">Tab 03</a></li> </ul> <div class="tabContents"> <div id="tab01">Đây là nội dung tab 01 Đây là nội dung tab 01 Đây là nội dung tab 01 Đây là nội dung tab 01 Đây là nội dung tab 01 Đây là nội dung tab 01</div> <div id="tab02">Đây là nội dung tab 02 Đây là nội dung tab 02 Đây là nội dung tab 02 Đây là nội dung tab 02 Đây là nội dung tab 02</div> <div id="tab03">Đây là nội dung tab 03 Đây là nội dung tab 03 Đây là nội dung tab 03 Đây là nội dung tab 03 Đây là nội dung tab 03 Đây là nội dung tab 03 Đây là nội dung tab 03 Đây là nội dung tab 03 Đây là nội dung tab 03 Đây là nội dung tab 03</div> </div> </div> </body> </html>