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

最新推荐文章于 2023-04-17 20:46:17 发布

pvfhv

最新推荐文章于 2023-04-17 20:46:17 发布

阅读量770

点赞数 1

分类专栏： javascript Jquery 文章标签： tab 选项卡

本文链接：https://blog.csdn.net/pvfhv/article/details/5462103

版权

javascript 同时被 2 个专栏收录

66 篇文章 0 订阅

订阅专栏

Jquery

23 篇文章 0 订阅

订阅专栏

众所周知，现在的各大网站上，选项卡即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>

效果图如下：