HTML+CSS+JAVASCRIPT选项卡

最新推荐文章于 2024-05-22 13:34:30 发布

fastrack_0706

最新推荐文章于 2024-05-22 13:34:30 发布

阅读量122

点赞数

分类专栏： web前端文章标签： HTML CSS JS JavaScript Tab选项卡

本文链接：https://blog.csdn.net/fastrack_15233866884/article/details/104038159

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

没性能的啊，就是循环遍历操作DOM

HTML--------code:

<body>
<div class="tab-wrap">
    <div class="tab">
        <ul class="tab-list">
            <li class="tab-item cur">
                选项卡1
            </li>
            <li class="tab-item">
                选项卡2
            </li>
            <li class="tab-item">
                选项卡3
            </li>
        </ul>
    </div>

    <div class="panel">
        <ul class="panel-list">
            <li class="panel-item active">1</li>
            <li class="panel-item">2</li>
            <li class="panel-item">3</li>
        </ul>
    </div>

</div>

<script type="text/javascript" src="HOME/js/Tab.js"></script>
<script type="text/javascript">
    var tabs = new Tabs({
        tabItem: 'tab-item',
        panelItem: 'panel-item'
    });
</script>
</body>

CSS----code:

body {
    margin: 0px;
    padding: 0px;
}

ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

a {
    text-decoration: none;
}

.tab-wrap {
    width: 500px;
    height: 500px;
    border: 1px solid #9B410E;
    margin: 50px auto;
}

.tab {
    width: 500px;
    height: 50px;
    border-bottom: 1px solid #000000;
}

.tab .tab-list {
    display: flex;
    flex-direction: row;
    text-align: center;
}

.tab-list .tab-item {
    width: 100px;
    height: 50px;
    color: black;
    line-height: 50px;
}

.tab-item.cur {
    background-color: black;
    color: white;
}

.tab-item:hover {
    color: white;
    background-color: black;
}

.panel {
    width: 100%;
    height: 450px;
    text-align: center;
    position: relative;
}

.panel-list .panel-item {
    width: 500px;
    position: absolute;
    text-align: center;
    line-height: 450px;
    font-size: 65px;
    display: none;
}

.panel-item.active {
    display: block;
}

javascript----code:

;(function () {
    var Tabs = function (opt) {
        this.tabs = document.getElementsByClassName(opt.tabItem);
        this.panels = document.getElementsByClassName(opt.panelItem);
        this.bindClick();
    }

    Tabs.prototype = {
        bindClick: function () {
            var tabItems = this.tabs,
                panelItems = this.panels;
            for (var i = 0; i < tabItems.length; i++) {
                (function (j) {
                    tabItems[j].onclick = function () {
                        for (var k = 0; k < tabItems.length; k++) {
                            tabItems[k].className = 'tab-item';
                            panelItems[k].className = 'panel-item';
                        }
                        tabItems[j].className += ' cur';
                        panelItems[j].className += ' active';
                    }
                }(i));
            }
        }
    }
    window.Tabs = Tabs;
}())

fastrack_0706

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JAVASCRIPT选项卡

没性能的啊，就是循环遍历操作DOMHTML--------code:<body><div class="tab-wrap"> <div class="tab"> <ul class="tab-list"> <li class="tab-item cur"> ...
复制链接

扫一扫

专栏目录