Tab sử dụng hover
Không có gì khác biệt lớn so với các dùng cơ bản, chỉ là mở tab khi hover.
Tab hover
Đây là kỹ thuật dành để mở nội dung của tab bằng cách sử dụng hover.
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(e) { e.preventDefault(); }); $(".tab a").hover(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).stop().fadeIn(); } return false; }, function() { 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>