Hướng dẫn tạo CSS3 & jQuery Tabs

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

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

1 MEGA [megacode]huong-dan-tao-css3-jquery-tabs.rar (2.36 KB)
Phí tải ~ 2,000 đ
Live Demo

Bạn cần phải Đăng nhập để tải file [megacode]huong-dan-tao-css3-jquery-tabs.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

Việc sắp đặt nội dung gọn gàng luôn luôn là một phần việc quan trọng cho các bạn thiết kế web. Vì thế mà tabs luôn luôn là sự lựa chọn lý tưởng cho việc sắp đặt các nhóm cùng nội dung.

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đ

Việc sắp đặt nội dung gọn gàng luôn luôn là một phần việc quan trọng cho các bạn thiết kế web. Vì thế mà tabs luôn luôn là sự lựa chọn lý tưởng cho việc sắp đặt các nhóm cùng nội dung.

Trong bài viết này, mình xin chia sẻ cho các bạn cách tạo tabs đơn giản bằng jQuery và đặc biệt hơn là các tabs này được thiết kế rất đẹp với chỉ bằng các thuộc tính của CSS3 mà không cần phải dùng bất kì hình ảnh nào.

HTML

Đầu tiên, chúng ta cần có mẫu html chứa các nội dung như sau :

<ul id="tabs">
    <li><a href="#" title="tab1">One</a></li>
    <li><a href="#" title="tab2">Two</a></li>
    <li><a href="#" title="tab3">Three</a></li>
    <li><a href="#" title="tab4">Four</a></li>
</ul>
 
<div id="content">
    <div id="tab1">One - content</div>
    <div id="tab2">Two - content</div>
    <div id="tab3">Three - content</div>
    <div id="tab4">Four - content</div>
</div>

CSS

Sau đó chúng ta sẽ sắp xếp nội dung cho gọn gàng với đoạn css sau :

#tabs {
  overflow: auto;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
 
#tabs li {
    margin: 0;
    padding: 0;
    float: left;
}
 
#tabs a {
    box-shadow: -4px 0 0 rgba(0, 0, 0, .2);
    background: #ad1c1c;
    background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    color: #fff;
    float: left;
    font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
    height: 35px;
    padding: 0 30px;
    text-decoration: none;
}
 
#tabs a:hover {
    background: #c93434;
    background: linear-gradient(220deg, transparent 10px, #c93434 10px);
}
 
#tabs a:focus {
    outline: 0;
}
 
#tabs #current a {
    background: #fff;
    background: linear-gradient(220deg, transparent 10px, #fff 10px);
    text-shadow: none;
    color: #333;
}
 
#content {
    background-color: #fff;
    background-image:         linear-gradient(top, #fff, #ddd);
    border-radius: 0 2px 2px 2px;
    box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
    padding: 30px;
}
 
/* Remove the rule below if you want the content to be "organic" */
#content div {
    height: 220px;
}

jQuery

Việc cuối cùng là các bạn chỉ cần chèn đoạn jquery sau :

<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#content div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#content div:first").fadeIn(); // Show first tab content
 
    $('#tabs a').click(function(e) {
        e.preventDefault();
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
    });
})();
</script>

Thế là xong, chúng ta đã có ngay một tabs rất đẹp để áp dụng vào chính website của mình rồi.

Tags: css3, jQuery , Tabs

Hướng dẫn tạo CSS3 & jQuery Tabs

Hướng dẫn tạo CSS3 & jQuery Tabs Đăng ngày 22-08-2014  Việc sắp đặt nội dung gọn gàng luôn luôn là một phần việc quan trọng cho các bạn thiết kế web. Vì thế mà tabs luôn luôn là sự lựa chọn lý tưởng cho việc sắp đặt các nhóm cùng nội dung. 5/10 963

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