选项卡插件jquery.tab.js和不用js写选项卡

众所周知,现在的各大网站上,选项卡即Tab页签的效果遍地都是,在开发过程中根据个人习惯对其进行了封装,具体使用方法怎么描述才准确呢,如果你严格按我的案例的布局进行设置,则你的页面中引用此插件后不用你再写一行代码,不再多说了,上源码。

源码:

(function($) {
	var $tabtitle = $('.tabtitle');
	
	//自动隐藏非active项
	$tabtitle.each(function(){
		var i=$(this).find('.active').index();
		$(this).next().find('li').eq(i).show().siblings().hide();
	});
	
	$tabtitle.on('click', 'li', function() {
		var i = $(this).index();
		$(this).addClass('active').siblings().removeClass('active');
		$(this).closest('.tabtitle').next().find('li').eq(i).show().siblings().hide();
	});
})(jQuery);

案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选项卡案例</title>
		<style type="text/css">
			*{
				font-family: "microsoft yahei";
				margin: 0;
				padding: 0;
			}
			.tabs{
				width: 500px;
				height: 150px;
				margin: 50px auto;
			}
			.tabtitle{
				width: 100%;
				height: 40px;
				line-height: 40px;
				clear: both;
				overflow: hidden;
			}
			.tabtitle li{
				font-size: 16px;
				text-align: center;
				text-decoration: none;
				color: #000000;
				min-width: 76px;
				height: 100%;
				padding: 0 12px;
				background: #EEEEEE;
				float: left;
				margin-right: 1px;
				list-style: none;
				cursor: pointer;
			}
			.tabtitle li:hover,.tabtitle .active{
				color: #ffffff;
				background: #00A750;
			}
			.tabContent{
				color: #FFFFFF;
				width: 100%;
				height: 100px;
				border: 1px solid #EEEEEE;
				overflow: hidden;
			}
			.tabContent li{
				font-size: 14px;
				color: #000000;
				width: 100%;
				height: 100%;
				padding: 10px;
				background: #FFFFFF;
				overflow: hidden;
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<div class="tabs">
			<div class="tabtitle">
				<ul>
					<li class="active">我的好友</li>
					<li>陌生人</li>
					<li>黑名单</li>
				</ul>				
			</div>
			<div class="tabContent">
				<ul>
					<li>我的好友:URL后面跟锚点#,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element),:target选择器用于选取当前活动的目标元素。URL后面跟锚点#,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element),:target选择器用于选取当前活动的目标元素。</li>
					<li>陌生人:E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法</li>
					<li>这里是黑名单的内容!!</li>
				</ul>
			</div>
		</div>
		<div class="tabs">
			<div class="tabtitle">
				<ul>
					<li class="active">我的好友</li>
					<li>陌生人</li>
					<li>黑名单</li>
				</ul>				
			</div>
			<div class="tabContent">
				<ul>
					<li>我的好友:URL后面跟锚点#,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element),:target选择器用于选取当前活动的目标元素。URL后面跟锚点#,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element),:target选择器用于选取当前活动的目标元素。</li>
					<li>陌生人:E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法</li>
					<li>这里是黑名单的内容!!</li>
				</ul>
			</div>
		</div>
		<div class="tabs">
			<div class="tabtitle">
				<ul>
					<li class="active">我的好友</li>
					<li>陌生人</li>
					<li>黑名单</li>
				</ul>				
			</div>
			<div class="tabContent">
				<ul>
					<li>我的好友:URL后面跟锚点#,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element),:target选择器用于选取当前活动的目标元素。URL后面跟锚点#,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element),:target选择器用于选取当前活动的目标元素。</li>
					<li>陌生人:E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法</li>
					<li>这里是黑名单的内容!!</li>
				</ul>
			</div>
		</div>
		<script src="../js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="jquery.tab.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>


如果不用js呢,你不怕用太多的id,照样可以实现一款tab效果,具体代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>:target选项卡</title>
		<style type="text/css">
			*{
				font-family: "microsoft yahei";
				margin: 0;
				padding: 0;
			}
			#tabs{
				width: 500px;
				height: 400px;
				margin: 50px auto;
			}
			.tabTitle{
				width: 100%;
				height: 40px;
				line-height: 40px;
				clear: both;
				overflow: hidden;
			}
			.tabTitle > a{
				font-size: 16px;
				text-align: center;
				text-decoration: none;
				color: #000000;
				min-width: 76px;
				height: 100%;
				padding: 0 12px;
				background: #EEEEEE;
				display: block;
				float: left;
				margin-right: 1px;
			}
			.tabTitle > a:hover{
				color: #ffffff;
				background: #00A750;
			}
			.tabContent{
				word-break: break-all;
				color: #FFFFFF;
				width: 100%;
				height: 100px;
				border: 1px solid #EEEEEE;
				overflow: hidden;
			}
			.tabContent > div{
				font-size: 14px;
				width: 100%;
				height: 100%;
				padding: 10px;
				background: #FFFFFF;
				overflow: hidden;
				box-sizing: border-box;
				z-index: 1;
			}
			.tabContent > div:nth-child(1),.tabTitle > a:nth-child(1){
				background: lightsalmon;
			}
			.tabContent > div:nth-child(2),.tabTitle > a:nth-child(2){
				background: lightpink;
			}
			.tabContent > div:nth-child(3),.tabTitle > a:nth-child(3){
				background: goldenrod;
			}
			:target{
				z-index: 2;
			}
		</style>
	</head>
	<body>
		<div id="tabs">
			<div class="tabTitle">
				<a href="#tab1">我的好友</a>
				<a href="#tab2">陌生人</a>
				<a href="#tab3">黑名单</a>
			</div>
			<div class="tabContent">
				<div id="tab1">我的好友:URL后面跟锚点#,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element),:target选择器用于选取当前活动的目标元素。URL后面跟锚点#,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element),:target选择器用于选取当前活动的目标元素。</div>
				<div id="tab2">陌生人:E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法E:target伪类使用方法</div>
				<div id="tab3">这里是黑名单的内容!!</div>
			</div>
		</div>
	</body>
</html>
效果图如下:


你可能感兴趣的:(tab,选项卡)