tabSwitch 选项卡

来源：互联网发布：阿里云服务器别名解析编辑：程序博客网时间：2024/05/17 03:22
<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        .tabCont{            width: 400px;            margin: 30px auto;            border: 1px solid #f00;        }        .tabCont ul{            list-style: none;            overflow: hidden;            background-color: #ccc;            margin: 0;        }        .tabCont li{            float: left;            margin-left: 50px;            border: 1px solid #f00;            display: inline-block;            width: 50px;            text-align: center;        }        .select{            background-color: #fff;        }        #divBody div{            clear: both;            display: none;            height: 300px;        }    </style></head><body><div id="tab" class="tabCont">    <ul>        <li >1</li>        <li class="select">2</li>        <li>3</li>    </ul>        <div id="divBody">            <div style="display: block;">1</div>            <div>2</div>            <div>3</div>        </div></div></body></html><script>        function TabSwitch(tabId) {            this.tabs = document.getElementById(tabId);            this.lis = this.tabs.getElementsByTagName('li');            this.divBody = this.tabs.getElementsByTagName('div')[0];            this.divs = this.divBody.getElementsByTagName('div');            this.init();        };        TabSwitch.prototype.init = function(){            var that = this;            for (var i = 0; i < this.lis.length; i++) {                this.lis[i].index = i;                this.lis[i].onclick = function () {                    that.showTab(this.index);                    var t = this.index;                    this.setFirstTab(t);                }            }        };        TabSwitch.prototype.setFirstTab = function(){            var currentIndex = 0;            for (var i = 0; i < this.lis.length; i++) {                var className = this.lis[i].className;                //检测字符串                if(className.indexOf("select") !== -1){                        currentIndex = i;                        break;                }            }        };        TabSwitch.prototype.showTab = function(index){            for(var i = 0;i < this.lis.length;i++){                this.lis[i].className = "";                this.divs[i].style.display = "none";            }            this.lis[index].className = "select";            this.divs[index].style.display = "block";        };        new TabSwitch("tab");</script>
1 0