Javascript之選項卡

項卡

選項卡在js中是一個重要的知識點。他沒有那么難，但在工作中卻有重要的位置。幾乎在每一個網站都能看到選項卡的實例。所以今天寫一下選項卡的實現。我們設想有四個按鈕分別來控制四個盒子當我們點擊當前的按鈕的時候，讓對應的盒子顯示，讓其余的盒子隱藏。

點擊選項后變換不同的內容

代碼部分

第一部分

第二部分

小編比較直接，大家可以先收藏起來，然后用DW或者sublime敲一遍，遇到的任何問題都可以在評論區留言，小編會一一解答。

謝謝。

項卡頁面設計的基本思路是將n個div內容塊疊在相同的位置，然后通過JS控制每個div內容塊的CSS屬性，實現需要內容的顯示（其它塊的暫時隱藏）。

簡單的效果演示所下：

1 HTML代碼

<div id="mainx">
<div class="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>

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


<div>
</div> 

<div>
<a >快樂學堂—小學生同步學習及親子教育的專業網站!</a>
</div>
<div>
<ul>
<li><a >文明之旅</a></li>
<li><a >開講了</a></li>
<li><a >百家講壇</a></li>
<li><a >讀書</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>