Hướng dẫn tạo Tab hiển thị nội dung với CSS & jQuery

Xem: 907    Tải: 10   Thảo luận: 0   Mục: Javascript   Lĩnh vực: Khác

0 điểm   ( 4 đánh giá ) File đã được kiểm thử

1 MEGA [megacode]huong-dan-tao-tab-hien-thi-noi-dung.rar (231.44 KB)
Phí tải ~ 2,000 đ
Live Demo

Bạn cần phải Đăng nhập để tải file [megacode]huong-dan-tao-tab-hien-thi-noi-dung.rar
Nếu bạn chưa có tài khoản thì Đăng ký miễn phí tại đây

Báo lỗi download   Báo vi phạm bản quyền

Những ánh đèn neon luôn luôn gây thu hút sự chú ý của mọi người,và đó cũng chính là lý do mà các cửa hàng nhỏ luôn luôn có những bảng hiệu làm bằng đèn neon với nhiều màu sắc để kéo khách vào tiệm của mình. Thế các bạn có muốn tạo những lời mời chào bằng đèn neon nhằm thu hút khách viếng thăm blog hay website của mình không ?

Tổng đài hỗ trợ KT: (+844) 6. 32.979.36 - Hotline: 0969.091.265
Hỗ trợ KT từ: 8h-17h30 các ngày trong tuần trừ chiều T7, CN và các ngày lễ;
Hỗ trợ kỹ thuật (KT) và cam kết chất lượng:
1. Code đảm bảo chất lượng giống demo 100%
2. Hỗ trợ cài đặt code cho khách hàng
3. Hỗ trợ hướng dẫn sử dụng cho khách hàng
Mega download: 1 MEGA = 2.000đ

jQuery là thư viện JavaScript phổ biến nhất hiện nay, việc nắm vững jQuery sẽ giúp các bạn vững vàng hơn cho việc thiết kế web cũng như trở thành Front End Developer sau này. Và cách học tốt nhất không phải là cặm cụi đọc sách mà chính là thực hành càng nhiều càng tốt.

Hôm nay mình sẽ chia sẻ cho các bạn một đoạn jQuery nhỏ thôi, nhưng nó sẽ giúp các bạn hiểu thêm về nó cũng như có thêm một chức năng nhỏ mà hầu như website nào cũng cần đến, đó là tạo các tab hiển thị nội dung.

HTML

Trước hết chúng ta sẽ tạo các tab bằng phần tử <ul> như sau :

<ul class="tabs">
    <li class="active">Call of Duty</li>
    <li>Mortal Combat</li>
    <li>Halo</li>
    <li>Portal</li>
</ul>

Kế tiếp là nội dung cho các thẻ tab

<div class="tab_container">
<div class="tab_content" id="tab1">
<img alt="" src="images/cod.jpg" />
 
 <strong>
 Call of Duty: Black Ops bears the series' standard superbly,
 delivering an engrossing campaign and exciting competitive multiplayer.
 </strong></div>
<!-- #tab1 -->
<div class="tab_content" id="tab2">
<img alt="" src="images/mortal combat.jpg" />
 
 <strong>
 Mortal Kombat returns after a lengthy hiatus and puts players
 back into the Tournament for 2D fighting with gruesome combat.
 </strong></div>
<!-- #tab2 -->
<div class="tab_content" id="tab3">
<img alt="" src="images/halo.jpg" />
 
 <strong>
 Halo: Reach is the culmination of the superlative combat, sensational
 multiplayer, and seamless online integration that are the hallmarks
 of this superb series.
 </strong></div>
<!-- #tab3 -->
<div class="tab_content" id="tab4">
<img alt="" src="images/portal.jpg" />
 
 <strong>
 Portal 2 is an action shooter game from Valve Software that draws
 from the original formula of innovative gameplay, story, and music,
 which earned the original Portal more than 70 industry accolades.
 </strong></div>
<!-- #tab4 --></div>
<pre>
 <!-- .tab_container -->

CSS

Bây giờ chúng ta sẽ định dạng lại các tab bằng CSS sao cho dễ nhìn , chúng ta sẽ định dạng đơn giản như sau :

ul.tabs {
        margin: 0;
        padding: 0;
        float: left;
        list-style: none;
        height: 32px;
        border-bottom: 1px solid #999999;
        border-left: 1px solid #999999;
        width: 100%;
}
 
ul.tabs li {
        float: left;
        margin: 0;
        cursor: pointer;
        padding: 0px 21px ;
        height: 31px;
        line-height: 31px;
        border: 1px solid #999999;
        border-left: none;
        font-weight: bold;
        background: #EEEEEE;
        overflow: hidden;
        position: relative;
}
 
ul.tabs li:hover {
        background: #CCCCCC;
}
 
ul.tabs li.active{
        background: #FFFFFF;
        border-bottom: 1px solid #FFFFFF;
}
 
.tab_container {
        border: 1px solid #999999;
        border-top: none;
        clear: both;
        float: left;
        width: 100%;
        background: #FFFFFF;
}
 
.tab_content {
        padding: 20px;
        font-size: 1.2em;
        display: none;
}
 
#container {
        width: 600px;
        margin: 0 auto;
}

jQuery

Để tab có thể hoạt động, các bạn cần chèn đoạn jQuery sau :

$(document).ready(function() {
    // ẩn tất cả các thẻ div với class="tab_content".
    $(".tab_content").hide();
    // Mặc định nội dung thẻ tab đầu tiên sẽ được hiển thị
    $(".tab_content:first").show();
 
    $("ul.tabs li").click(function() {
        // gỡ bỏ class="active" cho tất cả các thẻ
        $("ul.tabs li").removeClass("active");
        // chèn class="active" vào phần tử </li> vừa được click
        $(this).addClass("active");
        // ẩn tất cả thẻ với class="tab_content"
        $(".tab_content").hide();
        //Hiển thị nội dung thẻ tab được click với hiệu ứng Fade In
        var activeTab = $(this).attr("rel");
        $("#"+activeTab).fadeIn();
    });
});

Trong đoạn code bên trên mình đã chú thích cho từng câu lệnh,nếu bạn nào vẫn chưa hiểu thì đừng ngần ngại để lại lời nhắn dưới dạng comments, mình sẽ giải thích kỹ hơn. Mình mong rằng với bài viết ngắn này, các bạn mới bắt đầu tìm hiểu về jQuery sẽ có thêm kinh nghiệm trong việc sử dụng và code bằng jQuery.

Tags: css3, jQuery , Tabs

Hướng dẫn tạo Tab hiển thị nội dung với CSS & jQuery

Hướng dẫn tạo Tab hiển thị nội dung với CSS & jQuery Đăng ngày 22-08-2014  Những ánh đèn neon luôn luôn gây thu hút sự chú ý của mọi người,và đó cũng chính là lý do mà các cửa hàng nhỏ luôn luôn có những bảng hiệu làm bằng đèn neon với nhiều màu sắc để kéo khách vào tiệm của mình. Thế các bạn có muốn tạo những lời mời chào bằng đèn neon nhằm thu hút khách viếng thăm blog hay website của mình không ? 5/10 907

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn