纯JS制作选项卡--JavaScript实例集锦（初学）

最新推荐文章于 2025-07-19 14:38:46 发布

weixin_30701521

最新推荐文章于 2025-07-19 14:38:46 发布

阅读量90

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cheryshi/p/8405940.html

本文通过具体实例展示了如何使用JavaScript实现页面中的Tab切换效果，并对比了面向过程与面向对象两种编程方式的不同实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近重新从最基础学习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>