选项卡（一个最常见的网页组件）

最新推荐文章于 2021-02-26 15:31:01 发布

weixin_34301132

最新推荐文章于 2021-02-26 15:31:01 发布

阅读量242

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/HDou/p/3969721.html

版权

　　相信很多人都有见过网页中的格式各样的选项卡，感觉都差不多，但是对于每个写这些选项卡代码的程序员哥哥，我相信，每个人思路和实现方式应该会有差异。即使思路一样，可能代码实现也是不尽相同的。相信程序员哥哥的创造能力。

　　话不多说，上来看图(上图)整体感觉如此，对于颜色有洁癖的设计师门请留情。

　　先来说动态效果，鼠标移入头部的控制器部分，下面的内容部分对应切换，注意这里有两个微交互的效果，首先的头部对应鼠标移入的控制器颜色和字体颜色是渐变的，这样不会显得很生硬，其次是下面的内容部分切换是左右移入切换，这两个效果的实现都和css3的transition有关，这里先了解一下就可以。

　　说完上面这些，我么可以看下html是怎么布局的。

　　.html文件

<!Doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>sublime text</title>
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
</head>
	<body>
		<!--选项卡-->
		<div class="tap">
			<!--选项卡控制器-->	
			<ul class="control">
				<li class="activ">s</li>
				<li>sub</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ul>	
			<!--选项卡控制器-->	
			<!--选项卡内容-->
			<div class="warp">
				<ul class="comtent">
					<!--选项卡内容左半部分-->
					<li class="li_1">
						<ul class="img_list">
							<li><div><p>1</p></div></li>
							<li><div><p>2</p></div></li>
							<li><div><p>3</p></div></li>
							<li><div><p>4</p></div></li>
						</ul>
					</li>
					<!--选项卡内容左半部分-->
					<!--选项卡内容右半部分-->
					<li class="li_2">
						<p>选项卡内容右半部分</p>
					</li>
					<!--选项卡内容右半部分-->

					<li class="li_3">3</li>
					<li class="li_4">4</li>
					<li class="li_5">5</li>
				</ul>
			</div>
			<!--选项卡内容-->
		</div>	
		<!--选项卡-->
	</body>
</html>

好，相信会html的同学应该是能看懂的，很简单的布局，分的也很清楚。布局好html之后就是写css样式，当然在实际写的过程中是一边布局html然后紧跟就是写css样式了。

.css文件　　

*{ 
	margin: 0; 
	padding: 0; 
	list-style: none;
}

.tap{ width: 800px; height:380px; margin: 100px auto; border-radius: 10px 10px 0 0/10px 10px 0 0; overflow: hidden;}

.control{ 
	width: 100%; 
	height: 80px; 
	background: #CCC;  
	line-height: 80px; 
	text-align: center; 
	font-size: 20px; 
	font-family: 'Arial';
	border-bottom: 1px solid #FFF;
	z-index: 100;
}
.control li{
	height: 80px; 
	float: left;
}
.control li.activ{ 
	background: #409CCD; 
	color: #FFF;
	position: relative;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
.control li.activ:before{
	content: " ";
	width: 0px; 
	height:0px;
	position: absolute;
	border-bottom: 10px solid #FFF;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	bottom: 0px; 
	left: 50%;
	margin-left:-5px;
	z-index: 1000;	 
}
.control li.activ:after{
	content: " ";
	width: 0px; 
	height:0px;
	position: absolute;
	border-bottom: 10px solid #409CCD;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	bottom: -2px; 
	left: 50%;
	margin-left:-5px;
	z-index: 1000;	 
}




.warp{
	width: 100%; 
	height: 300px; 
	overflow: hidden; 
	position: relative;
}
.comtent{
	height: 300px; 
	position: absolute; 
	left: 0; 
	font-family: "微软雅黑";
	color: #FFF;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.comtent li{
	height: 300px; 
	float: left;
	background: #409CCD;
}

.img_list{ 
	width: 100%; 
	height: 300px; 
}
.img_list li{
	width: 25%; height: 260px; 
	padding: 20px 0; float: left; 
	text-align: center;
}
.img_list li div{
	width: 80%; height: 258px; 
	border: 1px  solid  #FFF; 
	margin: 0 auto;
}

　　这里因为选项卡的数量是没有固定的，可以是5也可以是3个，所以控制器的宽度是没有给定的。因为实际宽度我们要根据实际情况js计算出来。

　　那直接上.js文件很少的几行代码就实现了选项卡功能。当然，你们也看到了引入了jquery库。

$(function(){
		
	tab(".control",".comtent");//调用选项卡
})

//选项卡 传入参数 控制组件和内容组件 id 或class 

function tab(control,comtent){

		var $li = $(control+" >li");
		var mun = $li.length;
		var width = 1/mun * 100;
		$(comtent).css({width:mun*100 + "%"});
		$li.css({width:width +"%"});

		$(comtent+ " > li").css({width:width +"%"});
		for (var i =  0; i < mun; i++) {
			$li[i].index = i;
		};
		$li.mouseover(function(){
			$(this).addClass("activ").siblings().removeClass("activ");
			$(comtent).css({left:-100 * this.index + "%"});

		});
	}

　　全部代码都在上面，其中细节问题就是小尖角的实现和css渐变的实现。

　　其实css3功能很强大，利用before和after伪类来实现小尖角，

.control li.activ:before{
content: " ";
width: 0px;
height:0px;
position: absolute;
border-bottom: 10px solid #FFF;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
bottom: 0px;
left: 50%;
margin-left:-5px;
z-index: 1000;
}

　　这里一个色的尖角，然后在上面覆盖一个after灰色的小尖角位置下移2个px，这样就实现了细边框。这是唯一的细节。

　　在这篇文章之后我想说说我前端之路（想直接看代码的可以直接无视），很艰辛，也很偶然，不过，最终还是兴趣打败了一切问题和困难，走上这样一条路。说实话，此时的我还是很犹豫的，不知道接下去的路要怎么走。虽然闭着眼能够写出html+css布局和样式，可是对于ie什么布局兼容却一头雾水，虽然能用js写出网页基本的交互，但是如何面向对象，如何写出高性能的代码也无从下手，我相信这可能也是大多初学者或者进阶阶段前端攻城尸的最为头疼的。好了，都下班了，我也要走了，下篇在说我的前端之路。程序员哥哥不加班。哈哈。。。

转载于:https://www.cnblogs.com/HDou/p/3969721.html