Tạo một tabbed content đơn giản với jQuery

Tab là một thành phần không thể thiếu trong thiết kế giao diện website. Tab cho phép chúng ta trình bày rất nhiều nội dung trên cùng một diện tích, rất thích hợp cho những website có lượng thông tin nhiều có thể gom nhóm những thông tin lại làm cho website không bị rối mắt khi nhìn vào. Bài hương dẫn sử dụng jquery tạo tab content đơn giản sẽ giúp bạn thực hiện điều đó.

Những ứng dụng thực tế khi sử dụng tab content để trình bày thông tin sản phẩm các phần như: thông tin chi tiết, khuyến mãi, liên quan mỗi thành phần có thể cho một tab hoặc trong blog thì có tin xem nhiều, tin phổ biến, tin mới nhất … sau đây là chi tiết phần hướng dẫn tạo tab content.

huong dan tao tab content jquery

Giao diện như hình ảnh trên sẽ là kết quả mình làm được sau bài hướng dẫn này. Đầu tiên tạo HTML nhưng control tab 1, tab 2, tab 3 sẽ là list, ul li. nội dung là những div bên dưới chúng ta có thể thực hiện như sau.

<!--
	<div id="tabs-container">
	    <ul class="tabs-menu">
	        <li class="current"><a href="#tab-1">Tab 1</a></li>
	        <li><a href="#tab-2">Tab 2</a></li>
	        <li><a href="#tab-3">Tab 3</a></li>
	    </ul>
	    <div class="tab">
	        <div id="tab-1" class="tab-content">
	            <p>Nội dung tab 1 - bcdonline.net</p>
	        </div>
	        <div id="tab-2" class="tab-content">
	            <p>Nội dung tab 2 - bcdonline.net</p>
	        
	        </div>
	        <div id="tab-3" class="tab-content">
	            <p>Nội dung tab 3 - bcdonline.net</p>
	        </div>
	    </div>
	</div>
-->

Khi chạy thử file này lên bạn sẽ thấy tất cả dàng qua lại không ý muốn chúng ta, lúc này thì cần CSS lại cho chúng.

<!--
               #tabs-container{
			width: 350px;
		}

		.tabs-menu{
			height: 30px;
			padding: 0;
			margin: 0;
		}

		.tabs-menu li {
		    height: 30px;
		    line-height: 30px;
		    float: left;
		    margin-right: 10px;
		    border: 1px solid #d4d4d1;
		    list-style-type: none;
		}

		.tabs-menu li.current {
		    background-color: #007BB6;
		}

		.tabs-menu li a {
		    padding: 10px;
		    text-transform: uppercase;
		    text-decoration: none; 
		}

		.tabs-menu .current a {
		    color: #fff;
		}

		.tab {
		    border: 1px solid #d4d4d1;
		    float: left;
		    width: 350px;
		    margin-top: 20px;
			padding: 20px;
		}

		.tab-content {
		    display: none;
		}

		#tab-1 {
			display: block;   
		}
-->

Đó chỉ là CSS mình làm mẫu các bạn có thể style theo ý tương của mình, bước tiếp theo code jQuery cho tab chúng ta hoạt động như ý muốn.

<!--
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
	<script>
		$(document).ready(function() {
		    $(".tabs-menu a").click(function(e) {
		        e.preventDefault();
		        $(this).parent().addClass("current");
		        $(this).parent().siblings().removeClass("current");
		        var tab = $(this).attr("href");
		        $(".tab-content").not(tab).css("display", "none");
		        $(tab).fadeIn();
		    });
		});
	</script>
-->

Giải thích một tí về đoạn jquery trên, đầu tiên để sử dụng được jQuery chúng ta cần import thu viện jQuery vào như đoạn code đầu (nhớ để phía trên đoạn code mình code nha không thì nó không hoạt động được).

  • Bắt sự kiện click tab a (nếu click thì chạy code bên trong).
  • preventDefault: ngăn sự kiện mặc định khi click vào đối tượng ở đây là link (ngăn không cho chuyển trang, mở tab mới hay chạy lên phía trên nếu link là #).
  • parent: lấy đối tượng cha nó, ở đây là li của link đang kích qua từ khóa this sau đó addclass current vào.
  • siblings: Duyệt các thành phần cùng cấp với nó không tính nó (ở đây nếu có class current thì remove hết).
  • attr: lấy nội dung của đối tượng ở đây là href tức tab1, tab2, tab3. Sau đó thì display none những đối tương khác đối tượng đang click.

Kết luận: Vậy đã có một tab content đơn giản, từ đó bạn có thể trình bày nội dung vào trong các content thêm tab … mong là bài viết sẽ có ích cho dự án của bạn. Cảm ơn đã xem bài viết.

VN:F [1.9.22_1171]
Rating: 10.0/10 (2 votes cast)
Tạo một tabbed content đơn giản với jQuery, 10.0 out of 10 based on 2 ratings
Share This