<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>選項卡</title>
<link rel = "stylesheet" href = "css/normalize.css" />
<style type = "text/css">
.tab {width: 500px;margin: 50px auto;}
.tab-menu ul {height:30px;}
.tab-menu ul li {float:left;width:50px;height:30px;margin-right:3px;list-style:none;color:#000;border:solid 1px gray;border-bottom:none; text-align:center;line-height:30px;}
.tab-menu ul li.active {background-color: #007bc7;color: #fff;}
.tab-menu ul li:hover {cursor: pointer;}
.tab-box {height:150px;border:solid 1px gray;}
.tab-box div {display:none;}
.tab-box div.active {display:block;}
</style>
</head>
<body>
<div class = "tab">
<div class = "tab-menu class1">
<ul>
<li class = "active class4">時事</li>
<li>體育</li>
<li>娛樂</li>
</ul>
</div>
<div class = "tab-box class2">
<div class = "active">時事</div>
<div>體育</div>
<div>娛樂</div>
</div>
</div>
<script type = "text/javascript">
/*
*
*/
var tabList = document.getElementsByClassName( 'tab-menu' )[0].getElementsByTagName( 'li' );
var tabBox = document.getElementsByClassName( 'tab-box' )[0].getElementsByTagName( 'div' );
for( var i = 0;i<tabList.length;i++ ) {
tabList[i].onclick =function( num ) {
function foo() {
//隱藏其他選項卡的內容，切換到我們點擊的這個
for( var i = 0; i<tabList.length; i++ ) {
removeClass( tabList[i],'active' );
removeClass( tabBox[i],'active' );
}
addClass( this,'active' );
addClass( tabBox[num],'active' );
}
return foo;
}(i);
}
/*去除某個特定的樣式*/
function removeClass( obj, cN ) {
var strClassName = obj.className;
var arrClassName = strClassName.split(' ');
for( var i = 0; i < arrClassName.length; i++ ){
if(arrClassName[i] == cN) {
arrClassName.splice(i,1);
obj.className=arrClassName.join(' ');
break;
}
}
}
//增加某個特定的樣式
function addClass( obj, cN ) {
var strClassName = obj.className;
var arrClassName = strClassName.split(' ');
for( var i = 0; i < arrClassName.length; i++ ){
if(arrClassName[i] == cN) {
break;
}
}
if( i == arrClassName.length ) {
obj.className = arrClassName.join(' ') + ' ' + cN;
}
}
</script>
</body>
</html>
注：normalize.css的代碼百度就能查到，直接復制拷進去就能看到效果了；
這樣有個很大的缺陷，一旦網頁里有多個選項卡就會出現，就發現問題了，其他的選項卡不能夠起作用啊；逃了，回頭補充
2018.1.3我今天站在巨人的肩膀上把這個東西封裝了
html文件包含css
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>選項卡</title>
<script type="text/javascript" src="js/switchTab.js" ></script>
<link rel = "stylesheet" href = "css/normalize.css" />
<style type = "text/css">
#tab {width: 500px;margin: 50px auto;}
.tab-menu ul {height:30px;}
.tab-menu ul li {float:left;width:50px;height:30px;margin-right:3px;list-style:none;color:#000;border:solid 1px gray;border-bottom:none; text-align:center;line-height:30px;}
.tab-menu ul li.active {background-color: #007bc7;color: #fff;}
.tab-menu ul li:hover {cursor: pointer;}
.tab-box {height:150px;border:solid 1px gray;}
.tab-box div {display:none;}
.tab-box div.active {display:block;}
</style>
</head>
<body>
<div id = "tab">
<div class = "tab-menu class1">
<ul>
<li class = "active class4">時事</li>
<li>體育</li>
<li>娛樂</li>
</ul>
</div>
<div class = "tab-box class2">
<div class = "active">時事</div>
<div>體育</div>
<div>娛樂</div>
</div>
</div>
<div class = "tab">
<div class = "tab-menu class1">
<ul>
<li class = "active class4">時事</li>
<li>體育</li>
<li>娛樂</li>
</ul>
</div>
<div class = "tab-box class2">
<div class = "active">時事</div>
<div>體育</div>
<div>娛樂</div>
</div>
</div>
<script type="text/javascript">
switchTab.listen('#tab');
switchTab.listen('.tab');
</script>
</body>
</html>
js文件：
(function(){
//插件的功能都寫在這個函數下
//插件的主要功能可以總結至幾個關鍵參數，通過這幾個關鍵參數即可修改插件的主要功能
var options = {
spliter: 'char'
}
//helper
/*去除某個特定的樣式*/
function removeClass( obj, cN ) {
var strClassName = obj.className;
var arrClassName = strClassName.split(' ');
for( var i = 0; i < arrClassName.length; i++ ){
if(arrClassName[i] == cN) {
arrClassName.splice(i,1);
obj.className=arrClassName.join(' ');
break;
}
}
}
//增加某個特定的樣式
function addClass( obj, cN ) {
var strClassName = obj.className;
var arrClassName = strClassName.split(' ');
for( var i = 0; i < arrClassName.length; i++ ){
if(arrClassName[i] == cN) {
break;
}
}
if( i == arrClassName.length ) {
obj.className = arrClassName.join(' ') + ' ' + cN;
}
}
//切換功能實現
function toSwitch(t, splitter) {
var tabList = t.getElementsByClassName( 'tab-menu' )[0].getElementsByTagName( 'li' );
var tabBox = t.getElementsByClassName( 'tab-box' )[0].getElementsByTagName( 'div' );
for( var i = 0;i<tabList.length;i++ ) {
tabList[i].onclick =function( num ) {
function foo() {
//隱藏其他選項卡的內容，切換到我們點擊的這個
for( var i = 0; i<tabList.length; i++ ) {
removeClass( tabList[i],'active' );
removeClass( tabBox[i],'active' );
}
addClass( this,'active' );
addClass( tabBox[num],'active' );
}
return foo;
}(i);
}
}
/*api指向的是使用者，故需要在用戶調用插件時將api暴露給用戶，因用戶api是通過插件提供的名字進行使用
* 故將api設置為object類型，用戶就可以通過調用api的可以進行使用，具體的代碼如下：
* */
var api = {
config: function (opts) {
if(!opts) {
return options;
}
for(var key in opts) {
options[key] = opts[key];
}
return this;
},
listen: function listen(elem) {
if (typeof elem === 'string') {
var elems = document.querySelectorAll(elem),
i = elems.length;
while (i--) {
listen(elems[i]);
}
return
}
toSwitch(elem, options.splitter);
return this;
}
}
this.switchTab = api;
})();
options可以忽略；
封裝指南：http://geocld.github.io/2016/03/10/javascript_plugin/ 好人一生平安==