tabSwitch 选项卡

最新推荐文章于 2024-03-22 16:24:12 发布

诸葛苍穹

最新推荐文章于 2024-03-22 16:24:12 发布

阅读量2k

点赞数 1

分类专栏：程序算法

本文链接：https://blog.csdn.net/u012260672/article/details/61930334

版权

程序算法专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!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

收藏

觉得还不错? 一键收藏
0
评论
tabSwitch 选项卡

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .tabCont{ width: 400px; margin: 30px auto; border:
复制链接

扫一扫