原生js实现tab选项卡
<!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/ 好人一生平安==
