Tab sử dụng hover

Trở về

  • 3,815

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

  • Internet Explorer6
  • Firefox3
  • Opera9
  • Google Chrome9
  • Safari3

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>

Hiển thị trình duyệt:

Download file để thực hành

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.