選項卡在網(wǎng)頁里很常見，特別是導(dǎo)航網(wǎng)站和新聞網(wǎng)站等，我通過借鑒360導(dǎo)航，制作了一個簡單的選項卡。
1 概述
一個完整的選項卡應(yīng)該包括當(dāng)前選中選項，未選中的選項，每一次選中時都會出現(xiàn)一個與之其對應(yīng)的內(nèi)容界面。下面直接上代碼，根據(jù)詳細(xì)代碼來說明。
2 原理
2.1 html和css布局部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選項卡</title>
<style>
/* 初始化 */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
list-style: none;
overflow: hidden;
}
#main {
width: 300px;
border: 1px solid #ccc;
margin: 10px 10px;
}
#main h2 {
height: 35px;
line-height: 35px;
font-size: 14px;
color: green;
}
/* 選項 */
#main #tab {
width: 300px;
background-color: #fafafa;
}
#main #tab .tab-ul {
width: 300px;
clear: both;
overflow: hidden;
margin-left:-1px;
}
#main #tab .tab-ul li {
width: 75px;
height: 30px;
float: left;
border:1px solid #ccc;
line-height: 30px;
text-align: center;
}
#main #tab .tab-ul li a{
width: 75px;
height: 30px;
text-decoration: none;
}
/* 切換選項時的樣式 */
#main #tab li.active {
border-top: 0;
border-bottom: 0;
border-top:3px solid green;
background: #fcfcfc;
}
/* 內(nèi)容 */
#content ul {
width: 300px;
height: 200px;
display: none;
}
</style>
</head>
<body>
<div id="main">
<h2>猜你愛看</h2>
<div id="tab">
<ul class="tab-ul">
<li class="active"><a href="#">科技</a></li>
<li><a href="#">文化</a></li>
<li><a href="#">教育</a></li>
<li><a href="#">游戲</a></li>
</ul>
</div>
<div id="content">
<ul style="display: block;">
<li>
<h2></h2>
<p>內(nèi)容請自行添加(～￣▽￣)～</p>
</li>
</ul>
<ul>
<li>
<h2></h2>
<p>內(nèi)容請自行添加(～￣▽￣)～</p>
</li>
</ul>
<ul>
<li>
<h2></h2>
<p>內(nèi)容請自行添加(～￣▽￣)～</p>
</li>
</ul>
<ul>
<li>
<h2></h2>
<p>內(nèi)容請自行添加(～￣▽￣)～</p>
</li>
</ul>
</div>
</div>
</body>
</html>
在布局方面，要注意一個重點位置：
/* 切換選項時的樣式 */
#main #tab li.active {
border-top: 0;
border-bottom: 0;
border-top:3px solid green;
background: #fcfcfc;
}
這個active就是我們切換選項時顯示的樣式，其實選項卡的原理很簡單，就是切換選項時，讓選中的選項的class變?yōu)檫@個激活時的active，然后就是要注意在content內(nèi)容區(qū)，要在其ul元素內(nèi)添加行間樣式
style="display: block;"
然后在對應(yīng)的內(nèi)部樣式表里將ul設(shè)置
style="display: none;"
2.2 JS部分
window.onload=function () {
var tab=document.getElementById('tab');
var content=document.getElementById('content');
var aLi=tab.getElementsByTagName('li');
var aUl=content.getElementsByTagName('ul');
var now=content.getElementsByTagName('h2');
var oDate=new Date();
var aTops=['科技新聞','文化新聞','教育新聞','游戲新聞'];
/* 根據(jù)上面數(shù)組的數(shù)據(jù)和當(dāng)前日期，將其輸出到h2標(biāo)簽內(nèi) */
for(var k=0;k<now.length;k++) {
now[k].innerHTML=(oDate.getMonth()+1)+'月'+oDate.getDate()+'日'+aTops[k];
}
/* 選項卡功能實現(xiàn) */
for(var i=0;i<aLi.length;i++) {
aLi[i].index=i;
aLi[i].onclick=function () {
for(var j=0;j<aLi.length;j++) {
aLi[j].className='';
aUl[j].style.display='none';
}
this.className='active';
aUl[this.index].style.display='block';
}
}
};
js部分的原理其實也很簡單，主要分三步：
第一步，用外層for循環(huán)為aLi的每一個li元素創(chuàng)建一個onclick點擊事件，并將當(dāng)前的i復(fù)制給index計數(shù)器變量;
第二步，為onclick點擊事件創(chuàng)建一個匿名函數(shù)，并在其內(nèi)使用for循環(huán)，循環(huán)內(nèi)部將aLi當(dāng)前的className設(shè)置為空字符串，并將其對應(yīng)的 aUl設(shè)置隱藏。
第三步，匿名函數(shù)循環(huán)的外面，將aLi當(dāng)前的className設(shè)置為'active',同時對應(yīng)的 aUl設(shè)置顯示，這里要使用this運算符和前面創(chuàng)建的index計數(shù)器變量。
OK，選項卡完成，經(jīng)檢驗沒有bug，可以放心食用(～￣▽￣)～
3 完整代碼
下面是該實例的完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選項卡</title>
<style>
/* 初始化 */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
list-style: none;
overflow: hidden;
}
#main {
width: 300px;
border: 1px solid #ccc;
margin: 10px 10px;
}
#main h2 {
height: 35px;
line-height: 35px;
font-size: 14px;
color: green;
}
/* 選項 */
#main #tab {
width: 300px;
background-color: #fafafa;
}
#main #tab .tab-ul {
width: 300px;
clear: both;
overflow: hidden;
margin-left:-1px;
}
#main #tab .tab-ul li {
width: 75px;
height: 30px;
float: left;
border:1px solid #ccc;
line-height: 30px;
text-align: center;
}
#main #tab .tab-ul li a{
width: 75px;
height: 30px;
text-decoration: none;
}
/* 切換選項時的樣式 */
#main #tab li.active {
border-top: 0;
border-bottom: 0;
border-top:3px solid green;
background: #fcfcfc;
}
/* 內(nèi)容 */
#content ul {
width: 300px;
height: 200px;
display: none;
}
</style>
<script>
window.onload=function () {
var tab=document.getElementById('tab');
var content=document.getElementById('content');
var aLi=tab.getElementsByTagName('li');
var aUl=content.getElementsByTagName('ul');
var now=content.getElementsByTagName('h2');
var oDate=new Date();
var aTops=['科技新聞','文化新聞','教育新聞','游戲新聞'];
/* 根據(jù)上面數(shù)組的數(shù)據(jù)和當(dāng)前日期，將其輸出到h2標(biāo)簽內(nèi) */
for(var k=0;k<now.length;k++) {
now[k].innerHTML=(oDate.getMonth()+1)+'月'+oDate.getDate()+'日'+aTops[k];
}
/* 選項卡功能實現(xiàn) */
for(var i=0;i<aLi.length;i++) {
aLi[i].index=i;
aLi[i].onclick=function () {
for(var j=0;j<aLi.length;j++) {
aLi[j].className='';
aUl[j].style.display='none';
}
this.className='active';
aUl[this.index].style.display='block';
}
}
};
</script>
</head>
<body>
<div id="main">
<h2>猜你愛看</h2>
<div id="tab">
<ul class="tab-ul">
<li class="active"><a href="#">科技</a></li>
<li><a href="#">文化</a></li>
<li><a href="#">教育</a></li>
<li><a href="#">游戲</a></li>
</ul>
</div>
<div id="content">
<ul style="display: block;">
<li>
<h2></h2>
<p>內(nèi)容請自行添加(～￣▽￣)～</p>
</li>
</ul>
<ul>
<li>
<h2></h2>
<p>內(nèi)容請自行添加(～￣▽￣)～</p>
</li>
</ul>
<ul>
<li>
<h2></h2>
<p>內(nèi)容請自行添加(～￣▽￣)～</p>
</li>
</ul>
<ul>
<li>
<h2></h2>
<p>內(nèi)容請自行添加(～￣▽￣)～</p>
</li>
</ul>
</div>
</div>
</body>
</html>
