码迷,mamicode.com
首页 > 编程语言 > 详细

纯JS制作选项卡--JavaScript实例集锦(初学)

时间:2018-02-02 18:25:48      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:过程   html   效果   class   其他   head   alt   strong   com   

最近重新从最基础学习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实例集锦(初学)

标签:过程   html   效果   class   其他   head   alt   strong   com   

原文地址:https://www.cnblogs.com/cheryshi/p/8405940.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!