javascript 标签切换

* index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>js + css 实现标签内容切换功能</title>

    <link type="text/css" rel="stylesheet" href="./css/style.css" />

</head>

<body>

    <ul id="list-title">

        <li class="list-item list-item-checked">1</li>

        <li class="list-item">2</li>

        <li class="list-item">3</li>

    </ul>

    <div id="content-box">

        <div class="contents contents-checked">content_1</div>

        <div class="contents">content_2</div>

        <div class="contents">content_3</div>

    </div>

    <script type="text/javascript" src="./js/switchTabs.js"></script>

    <script>

        switchTabs(".list-item", ".contents", "list-item-checked", "contents-checked");

    </script>

</body>

</html>

* css/style.css

#list-title {

    height: 60px;

    margin: 0;

    padding: 0;

    list-style-type: none;

}

.list-item {

    float: left;

    width: 100px;

    height: 50px;

    margin: 2px;

    line-height: 50px;

    font-size: 28px;

    text-align: center;

    border: 1px solid #ccc;

    cursor: pointer;

}

.list-item-checked {

    background-color: #70adff;

    color: #ffffff;

}

#content-box {

    position: relative;

    clear: both;

    margin: 0 2px;

}

.contents {

    position: absolute;

    left: 0;

    top: 0;

    width: 312px;

    height: 300px;

    font-size: 32px;

    line-height: 300px;

    text-align: center;

    border: 1px solid #ccc;

    z-index: 0;

    opacity: 0;

    visibility: hidden;

    -webkit-transition: all .5s;

    -moz-transition: all .5s;

    -ms-transition: all .5s;

    -o-transition: all .5s;

    transition: all .5s;

}

.contents-checked {

    z-index: 1;

    opacity: 1;

    visibility: visible;

}

#content-box > .contents:first-child {

    background-color: #c8ff40;

}

#content-box > .contents:nth-child(2) {

    background-color: #41ff6f;

}

#content-box > .contents:nth-child(3) {

    background-color: #ff82a0;

}

* js/switchTabs.js

/*

 * tab:用于触发事件的标签的selector；

 * content:内容容器的类名；

 * ts:标签为选中状态时的样式；

 * cs:内容容器为选中状态时的样式；

 * 检查元素的类名列表中是否有指定的类名，如果有则移除，如果没有则添加；

 * */

function switchTabs(tab, content, ts, cs) {

    var tabs = document.querySelectorAll(tab),

        contents = document.querySelectorAll(content),

        last = 0; // 上一次选中元素的index

    tabs.forEach(function (tab, i) {

        (function (i) {

            tab.onclick = function () {

                tabs[last].classList.remove(ts);

                contents[last].classList.remove(cs);

                last = i;

                this.classList.add(ts);

                contents[i].classList.add(cs);

            }

        })(i);

    });

}

巴特西

javascript 标签切换

最新文章

热门文章