项卡

选项卡在js中是一个重要的知识点。他没有那么难，但在工作中却有重要的位置。几乎在每一个网站都能看到选项卡的实例。所以今天写一下选项卡的实现。我们设想有四个按钮分别来控制四个盒子当我们点击当前的按钮的时候，让对应的盒子显示，让其余的盒子隐藏。

点击选项后变换不同的内容

代码部分

第一部分

第二部分

小编比较直接，大家可以先收藏起来，然后用DW或者sublime敲一遍，遇到的任何问题都可以在评论区留言，小编会一一解答。

谢谢。

项卡页面设计的基本思路是将n个div内容块叠在相同的位置，然后通过JS控制每个div内容块的CSS属性，实现需要内容的显示（其它块的暂时隐藏）。

简单的效果演示所下：

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

1 HTML代码

<div id="mainx">

<div class="main"><!--2 main -->

<div class="left">

<div id="tab">

<h3 class="up" onclick="goto1(1);">知与行</h3>

<h3 onclick="goto1(2);">听、讲故事</h3>

<h3 onclick="goto1(3);">学习网站</h3>

<h3 onclick="goto1(4);">视频网站</h3>

<h3 onclick="goto1(5);">15</h3>

<!--p11 start -->

<div class="block" id="c11">

<p>&nbsp;</p>

</div>

<!--p11 end -->

<!--p12 start -->

<div>

</div> <!--p12 end -->

<!--p13 start -->

<div>

<a href="http://www.91118.com/">快乐学堂—小学生同步学习及亲子教育的专业网站!</a>

</div>

<div>

<ul>

<li><a href="http://tv.cctv.com/lm/wmzl/videoset/">文明之旅</a></li>

<li><a href="http://v.baidu.com/show/1797.htm?&amp;q=%E5%BC%80%E8%AE%B2%E5%95%A6">开讲了</a></li>

<li><a href="http://v.baidu.com/show/5836.htm?&amp;q=%E7%99%BE%E5%AE%B6%E8%AE%B2%E5%9D%9B" >百家讲坛</a></li>

<li><a href="http://v.baidu.com/show/1555.htm?&amp;q=%E8%AF%BB%E4%B9%A6">读书</a></li>

</ul>

</div>

2 CSS代码

#tab {

position:relative;

width:100%;/* 定义选项卡的整体宽度 */

height:208px;

clear:both;

}

#tab div {

position:absolute;

top:28px;

left:0px;

width:100%;

height:180px;

display:none;

}

#tab .block{

display:block;

padding-bottom:6px;

border-right: #eee 1px dashed;

}

#tab h3{

float:left;

width:18.95%;

height:1.625em;

margin:1px 0px;

line-height:1.625em;

font-size:1em;

font-weight:normal;

text-align:center;

color:#00007F;

background:#EEEEEE url(tab_bg.gif) no-repeat right top;

background-position:right;

cursor:url(zfirst/css/rose.ani);

display:block;

overflow:hidden;

margin-left:2px;

border-bottom:2px solid #ddd;

border-right:2px solid #ddd;

}

#tab .up {

background:#fff url(tab_up_bg.gif) no-repeat;

margin-left:2px;

border-top:2px solid #eee;

border-left:2px solid #eee;

border-right:2px solid #eee;

border-bottom:0px solid #fff

}

3 JS代码

function goto1(ao){

var h=document.getElementById("tab").getElementsByTagName("h3");

var d=document.getElementById("tab").getElementsByTagName("div");

for(var i=0;i<10;i++){

if(ao-1==i){

h[i].className+=" up";

d[i].className+=" block";

}

else {

h[i].className=" ";

d[i].className=" ";

}}}

机端排版不佳，建议网页浏览，为方便复制，用的代码，就没用截图。

js（jQuery实现---推荐）

<script type="text/javascript">
	$(function(){
		$('#btns input').click(function(){
			//this原生对象
			//给当前对象添加cur样式，并把同级兄弟元素移除cur样式
			$(this).addClass('cur').siblings().removeClass('cur');
			//$(this).index()获取当前按钮所在层级范围的索引值
	$('#contentsdiv').eq($(this).index()).addClass('active').siblings().removeClass('active');
		});
	});
</script>

js（闭包实现）

<script type="text/javascript">
	window.onload = function(){
		var aBtn = document.getElementById('btns').getElementsByTagName('input');
		var aCon = document.getElementById('contents').getElementsByTagName('div');
		for(var i=0;i<aBtn.length;i++){
			//闭包，将一个变量长期驻扎在内存当中，可用于循环中存索引值
			(function(i){
				aBtn[i].onclick = function(){
					for(var j=0;j<aBtn.length;j++){
						aBtn[j].className = '';
						aCon[j].className = '';
					}
				this.className='cur';
				//如果不用闭包，i的值始终是3
				aCon[i].className = 'active';
				}
			})(i)				
		}
	}
</script>

css

<style type="text/css">
	.btns{
		width:500px;
		height: 50px;
	}
	.btns input{
		width: 100px;
		height: 50px;
		background-color: #ddd;
		color: #666;
		border: 0px;
	}
	.btns input.cur{
		background-color: gold;
	}
	.contents div{
		width:500px;
		height: 300px;
		background-color: gold;
		display: none;
		line-height: 300px;
		text-align: center;
		font-size: 50px;
	}
	.contents div.active{
		display: block;
	}
</style>

html