JS制表插件实现-优快云博客

本文介绍了一种使用JavaScript实现的简易制表插件，该插件能够通过点击不同的按钮来切换显示的内容，并且能够更改按钮样式及隐藏或显示对应的内容区域。文中提供了两种实现方式并对比了它们的特点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>oop</title>
</head>
<style type="text/css">
.current {background-color: red; }
.dv { background-color: green; width: 200px; height: 200px; color: #fff;}
</style>
<body>
<div id="a">
    <span myhref="http://www.unitever.com">111</span>
    <span myhref="http://www.baidu.com">222</span>
    <span myhref="http://www.sina.com">333</span>
    <a href="#">更多>></a>
    <div  class="dv" style="display: none; ">111</div>
    <div  class="dv"  style="display: none; ">222</div>
    <div  class="dv"  style="display: none; ">333</div>
</div>
<div id="b">
    <span myhref="http://www.google.com">333</span>
    <span myhref="http://www.sohu.com">444</span>
    <span  myhref="http://www.taobao.com">555</span>
    <a href="#">更多>></a>
    <div  class="dv" style="display: none; ">dv333333</div>
    <div  class="dv"  style="display: none; ">dv4444444</div>
    <div  class="dv"  style="display: none; ">dv5555555555</div>
</div>

</body>
</html>
<script type="text/javascript">
function tabChange(options){
    this.options=options;
    this.fnclick();
}
tabChange.prototype={
    fnclick:function(){
        var _this=this;
        var num=this.options.showIndex;
        this.options.TabBtn[num].className="current";
        this.options.TabDiv[num].style.display="block";
        if(this.options.moreLink){
            this.options.moreLink.setAttribute("href",this.options.TabBtn[num].getAttribute("myhref"));
        }
        for (var i = 0; i < this.options.TabBtn.length; i++) {
            (function(index){
                _this.options.TabBtn[index].onclick=function(){
                    _this.options.TabBtn[num].className="";
                    _this.options.TabDiv[num].style.display="none";
                    num=index;
                    this.className="current";
                    _this.options.TabDiv[num].style.display="block";
                    if(_this.options.moreLink){
                        _this.options.moreLink.setAttribute("href",_this.options.TabBtn[num].getAttribute("myhref"));
                    
                    }
                }
            })(i)
        };
    }
}


var aDiv=document.getElementById("a")
var cBtn=aDiv.getElementsByTagName("span");
var cDiv=aDiv.getElementsByTagName("div");
var Aa2=aDiv.getElementsByTagName("a")[0];
new tabChange({showIndex:2,TabBtn:cBtn,TabDiv:cDiv,moreLink:Aa2})


var bDiv=document.getElementById("b")
var Abtn=bDiv.getElementsByTagName("span");
var Adiv=bDiv.getElementsByTagName("div");
var Aa=bDiv.getElementsByTagName("a")[0];
new tabChange({showIndex:1,TabBtn:Abtn,TabDiv:Adiv,moreLink:Aa})
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>oop</title>
</head>
<style type="text/css">
.current { background-color: red; }
.dv { background-color: green; width: 200px; height: 200px; color: #fff;}
</style>
<body>
<div id="a">
    <span class="sp2" >111</span>
    <span class="sp2">222</span>
    <span class="sp2">333</span>
    <div  class="dv" style="display: none; ">111</div>
    <div  class="dv"  style="display: none; ">222</div>
    <div  class="dv"  style="display: none; ">333</div>
</div>
<div id="b">
    <span class="sp2" >333</span>
    <span class="sp2">444</span>
    <span class="sp2">555</span>
    <div  class="dv" style="display: none; ">dv333333</div>
    <div  class="dv"  style="display: none; ">dv4444444</div>
    <div  class="dv"  style="display: none; ">dv5555555555</div>
</div>
</body>
</html>
<script type="text/javascript">
function tabChange(options){
    this.options=options;
    this.fnclick();
}
tabChange.prototype={
    init:function(){
        for(var i=0;i<this.options.TabBtn.length;i++){
            this.options.TabBtn[i].className="";
            this.options.TabDiv[i].style.display="none";
        }
    },
    fnclick:function(){
        var _this=this;
        this.options.TabBtn[this.options.showIndex].className="current";
        this.options.TabDiv[this.options.showIndex].style.display="block";    
        for (var i = 0; i < this.options.TabBtn.length; i++) {
            (function(index){
                _this.options.TabBtn[index].onclick=function(){
                    _this.init();
                    this.className="current";
                    _this.options.TabDiv[index].style.display="block";
                }
            })(i)
        };
    }
}

var bDiv=document.getElementById("b")
var Abtn=bDiv.getElementsByTagName("span");
var Adiv=bDiv.getElementsByTagName("div");
new tabChange({showIndex:0,TabBtn:Abtn,TabDiv:Adiv})


var aDiv=document.getElementById("a")
var aBtn=aDiv.getElementsByTagName("span");
var aDiv=aDiv.getElementsByTagName("div");
new tabChange({showIndex:2,TabBtn:aBtn,TabDiv:aDiv})

</script>