RSSJquery

Hướng dẫn tạo Tab đơn giản bằng jQuery

Nếu bạn là một nhà thiết kế website chuyên nghiệp, chắc hẳn bạn sẽ đồng ý rằng để thu hút khách, bạn phải thiết kế một website thật bắt mắt và trực quan . Ngoài những yếu tố như logo, menu, màu sắc, còn phải kể đến văn bản. Làm sao hiển thị được nhiều nội dung cần diễn đạt mà không tốn diện tích. Tab đã ra đời. Hãy cùng Y2Graphic xem cách tạo Tab đơn giản trong bài viết dưới đây.

HTML

Đầu tiên, chúng ta tạo những tab. Trong ví dụ này, mình sẽ tạo ra 4 tab, tương đương với 4 tab sẽ là những link được đánh số #tab1,#tab2,#tab3,#tab4. Ngoài ra bạn cũng cần tạo thêm 1 thẻ div tên là tabContaier nằm ngoài cùng những tab này.

<div id="tabContaier">
	<ul>
    	<li><a class="active" href="#tab1">Xã hội</a></li>
    	<li><a href="#tab2">Thế giới</a></li>
    	<li><a href="#tab3">Văn hoá</a></li>
		<li><a href="#tab4">Khoa học</a></li>
    </ul>
</div>
 

Thêm nội dung của từng tab vào.

<div class="tabDetails">
    	<div id="tab1" class="tabContents">
        	<--Nội dung cần trình bày -->
        </div>
		<div id="tab2" class="tabContents">
        	<--Nội dung cần trình bày -->
        </div>
		<div id="tab3" class="tabContents">
        	<--Nội dung cần trình bày -->
        </div>
		<div id="tab4" class="tabContents">
        	<--Nội dung cần trình bày -->
        </div>
</div>

CSS

#tabContaier{
	background:#a0afbd;
	border:1px solid #7b9bbb;
	margin:20px auto;
	padding:20px;
	position:relative;
	width:500px;}
	
#tabContaier ul{
	overflow:hidden;
	border-right:1px solid #fff;
	height:35px;
	position:absolute;
	z-index:100;}
	
#tabContaier li{
	float:left;
	list-style:none;}

#tabContaier li a{
	background:#ddd;
	border:1px solid #fcfcfc;
	border-right:0;
	color:#333;
	cursor:pointer;
	display:block;
	height:35px;
	font-weight:700;
	line-height:35px;
	padding:0 30px;
	text-decoration:none;
	text-transform:uppercase;}
	
#tabContaier li a:hover{
	background:#ccc;}
	
#tabContaier li a.active{
	background:#fbfbfb;
	border:1px solid #fff;
	border-right:0;
	color:#333;}
	
.tabDetails{
	background:#fbfbfb;
	border:1px solid #fff;
	margin:34px 0 0;}
	
.tabContents{
	padding:20px}
	
.tabContents h1{
	font-family:Arial, Helvetica, sans-serif;
	color:#333;
	font-size:18px;
	padding:0 0 10px;}

.tabContents p{
	padding:0 0 10px;
	text-align:justify;}

Nếu bạn muốn tạo hơn số tab trong ví dụ này, bạn có thể điều chỉnh thuộc tính width trong thẻ #tabContaier.

Hướng dẫn tạo Tab đơn giản bằng jQuery

jQuery

Chúng ta đã hoàn chỉnh HTML & CSS. Để tab hoạt động, ta copy đoạn script này và đặt trong thẻ

<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".tabContents").hide(); // Ẩn toàn bộ nội dung của tab
		$(".tabContents:first").show(); // Mặc định sẽ hiển thị tab1
		
		$("#tabContaier ul li a").click(function(){ //Khai báo sự kiện khi click vào một tab nào đó
			
			var activeTab = $(this).attr("href"); 
			$("#tabContaier ul li a").removeClass("active"); 
			$(this).addClass("active"); 
			$(".tabContents").hide(); 
			$(activeTab).fadeIn(); 
		});
	});
</script>	
Nguồn: Y2Graphic

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu