纯JS制作选项卡--JavaScript实例集锦（初学）
Posted 筱风能动浪，岸树不遮山
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯JS制作选项卡--JavaScript实例集锦（初学）相关的知识，希望对你有一定的参考价值。
最近重新从最基础学习javascript，如同盖房，先要打好基础，一砖一瓦都很重要。
下面我来嘚吧几句，附上从书上学到的实例与效果。
JS可以用面向过程去写，也可以使用面向对象。面向对象会使一段JS代码更好进行复用，封装与继承。
已下我会写出2种实现tab切换的方法--面向过程与面向对象
面向过程如同你写一篇文章，从头写到尾，不用介绍人物，场景，按照顺序一路写下去即可。
1.tab切换效果图
代码实现：
<!DOCTYPE html> <html> <head> <title>选项卡</title> <style type="text/css"> input{background: white;} .active{background: yellow;} div{width: 200px;height: 200px;background: #ccc;display: none;} </style> <script type="text/javascript"> window.onload=function(){ var aBtn=document.getElementsByTagName(\'input\');//getElementByTagName 获取所有的input var aDiv=document.getElementsByTagName(\'div\');//getElementByTagName 获取所有的div
for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i; //记录按钮的索引值，点击了第几个按钮
aBtn[i].onclick=function(){
for (var i = 0;i<aBtn.length;i++) {
aBtn[i].className=""; //for循环设置其他按钮的Class为空
aDiv[i].style.display="none";//for循环设置其他div隐藏
}
// alert(\'点击了第\'+this.index+\'个按钮\');
this.className="active";//设置当前按钮的Class为active
aDiv[this.index].style.display="block";//设置当前div显示
};
}
}
</script>
</head>
<body>
<input class="active" type="button" value="1"/>
<input type="button" value="2"/>
<input type="button" value="3"/>
<div style="display: block">111</div>
<div>222</div>
<div>333</div>
</body>
</html>
2.面向对象的tab切换
效果图一样，但代码实现会有差别
代码实现：
<!DOCTYPE html> <html> <head> <title>选项卡</title> <style type="text/css"> input{background: white;} .active{background: yellow;} #div1 div{width: 200px;height: 200px;background: #ccc;display: none;} #div1{display: block;} </style> <script type="text/javascript"> // var aBtn=null; // var aDiv=null; window.onload=function(){ var oTab=new TabSwitch(\'div1\');//实例化一个对象 } function TabSwitch(id){ var oDiv=document.getElementById(id); this.aBtn=oDiv.getElementsByTagName(\'input\'); this.aDiv=oDiv.getElementsByTagName(\'div\'); var _this=this;//用_this存取对象，对象具有标签切换的功能 for(var i=0;i<this.aBtn.length;i++){ this.aBtn[i].index=i; this.aBtn[i].onclick=function() { _this.tab(this); }; } }; TabSwitch.prototype.tab=function(oBtn){ for (var i = 0;i<this.aBtn.length;i++) { this.aBtn[i].className=""; this.aDiv[i].style.display="none"; } // alert(\'点击了第\'+this.index+\'个按钮\'); oBtn.className="active"; this.aDiv[oBtn.index].style.display="block"; }; </script> </head> <body> <div id="div1"> <input class="active" type="button" value="1"/> <input type="button" value="2"/> <input type="button" value="3"/> <div style="display: block">111</div> <div>222</div> <div>333</div> </div> </body> </html>
面向对象的好处是：如果想多次使用该JS方法，只需要实例化多个对象即可。
var oTab=new TabSwitch(\'div1\');//实例化一个对象
var oTab=new TabSwitch(\'div2\');//实例化一个对象
以上是关于纯JS制作选项卡--JavaScript实例集锦（初学）的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript实现全选选项框的功能和鼠标划入出现下拉框的功能--JavaScript实例集锦（初学）