Tab đơn giản

Trở về

  • 4,805

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

  • 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() {
        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>

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.