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 标签切换

猜你喜欢