如何在一个HTML页面中管理两个选项卡？

Question

我有管理一个标签的代码。但现在我想在该页面上添加另一个标签。我怎么做才能管理两个单独的选项卡一起影响？第一个选项卡用于管理框，其他选项卡用于管理其他选项卡。

我将代码放在'代码段'中：

window.onload = function () {
    var classname = document.getElementsByClassName("tabitem");
    var boxitem = document.getElementsByClassName("box");

    var clickFunction = function (e) {
        e.preventDefault();
        var a = this.getElementsByTagName("a")[0];
        var span = this.getElementsByTagName("span")[0];
        var href = a.getAttribute("href").replace("#", "");
        for (var i = 0; i < boxitem.length; i++) {
            boxitem[i].className = boxitem[i].className.replace(/(?:^|\s)show(?!\S)/g, '');
        }
        document.getElementById(href).className += " show";
        for (var i = 0; i < classname.length; i++) {
            classname[i].className = classname[i].className.replace(/(?:^|\s)active(?!\S)/g, '');
        }
        this.className += " active";
        span.className += 'active';
        var left = a.getBoundingClientRect().left;
        var top = a.getBoundingClientRect().top;
        var consx = (e.clientX - left);
        var consy = (e.clientY - top);
        span.style.top = consy + "px";
        span.style.left = consx + "px";
        span.className = 'clicked';
        span.addEventListener('webkitAnimationEnd', function (event) {
            this.className = '';
        }, false);
    };

    for (var i = 0; i < classname.length; i++) {
        classname[i].addEventListener('click', clickFunction, false);
    }
}

.toolbar {
    background: #03A9F4;
}

.tabs {
    padding-top: 1%;
}

    .tabs ul {
        list-style: none;
        margin: 0;
        width: 100%;
        overflow: hidden;
        padding: 0;
    }

        .tabs ul li {
            float: right;
            width: 50%;
        }

    .tabs a {
        position: relative;
        color: white;
        text-decoration: none;
        display: block;
        width: 100%;
        text-align: center;
        line-height: 40px;
        font-weight: 500;
        font-size: 13px;
        color: #ecf0f1;
        overflow: hidden;
    }

    .tabs .active a {
        color: #fff;
    }

        .tabs .active a:after {
            height: 2px;
            width: 100%;
            display: block;
            content: " ";
            bottom: 0px;
            left: 0px;
            position: absolute;
            background: #f57c00;
            -webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;
            -moz-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;
            transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
        }

    .tabs a span {
        position: absolute;
        margin-left: -40px;
        margin-top: -24px;
        width: 80%;
        background: #f57c00;
        height: 100%;
        display: block;
        border-radius: 50%;
        opacity: 0;
    }

        .tabs a span.clicked {
            -webkit-animation: expand 0.6s cubic-bezier(0.1, 0.0, 0.4, 1) 0s normal;
            -moz-animation: expand 0.6s cubic-bezier(0.1, 0.0, 0.4, 1) 0s normal;
            border-bottom: 2px solid #f57c00;
        }

.content {
    box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
    height: auto;
    padding-top: 50px;
    position: relative;
    top: 0px;
    overflow: hidden;
}

.box {
    display: none;
    overflow: auto;
    position: relative;
    overflow-x: hidden;
}

    .box.show {
        display: block;
    }

.box2 {
    display: none;
    overflow: auto;
    position: relative;
    overflow-x: hidden;
}

    .box2.show {
        display: block;
    }


@-webkit-keyframes expand {
    0% {
        /*background: rgba(255,255,141,1);*/
        /*opacity: 1;*/
        border-radius: 100%;
        /*transform: scale(0);
        -webkit-transform: scale(0);
        -moz-transform: scale(0);*/
    }

    50% {
        /*background: rgba(255,255,141,0.8);*/
        border-radius: 50%;
    }

    100% {
        /*background: rgba(255,255,141,0);*/
        /*transform: scale(3);*/
        border-radius: 0;
        /*-webkit-transform: scale(3);
        -moz-transform: scale(3);
        opacity: 1;*/
    }
}

@-moz-keyframes expand {
    0% {
        /*background: rgba(255,255,141,1);*/
        /*opacity: 1;*/
        border-radius: 100%;
        /*transform: scale(0);
        -moz-transform: scale(0);*/
    }

    50% {
        /*background: rgba(255,255,141,0.8);*/
        border-radius: 50%;
    }

    100% {
        /*background: rgba(255,255,141,0);*/
        /*transform: scale(3);*/
        border-radius: 0;
        /*-moz-transform: scale(3);
        opacity: 1;*/
    }
}

@-webkit-keyframes border-expand {
    0% {
        opacity: 0;
        width: 0;
    }

    100% {
        opacity: 1;
        width: 100%;
    }
}

@-moz-keyframes border-expand {
    0% {
        opacity: 0;
        width: 0;
    }

    100% {
        opacity: 1;
        width: 100%;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toolbar">
                    <div class="tabs">
                        <ul>
                            <li class="tabitem active"><a href="#box1">car<span></span></a></li>
                            <li class="tabitem"><a href="#box2">motor<span></span></a></li>
                        </ul>
                    </div>
                </div>
                <div class="content">
                    <div id="box1" class="box show">
                        ss
                    </div>
                    <div id="box2" class="box">
                        555
                    </div>
                </div>
                <div class="toolbar">
                    <div class="tabs">
                        <ul>
                            <li class="tabitem2 active"><a href="#box3">person<span></span></a></li>
                            <li class="tabitem2"><a href="#box4">company<span></span></a></li>
                        </ul>
                    </div>
                </div>
                <div class="content">
                    <div id="box3" class="box2 show">
                        ss
                    </div>
                    <div id="box4" class="box2">
                        555
                    </div>
                </div>

Answer 1

我找到了解决办法：）

＆＃13;

＆＃13;

window.onload = function () {

    $(".tabitem2 a").click(function () {

        var classname = document.getElementsByClassName("tabitem2");
        var boxitem = document.getElementsByClassName("box2");

        var clickFunction = function (e) {
            e.preventDefault();
            var a = this.getElementsByTagName("a")[0];
            var span = this.getElementsByTagName("span")[0];
            var href = a.getAttribute("href").replace("#", "");
            for (var i = 0; i < boxitem.length; i++) {
                boxitem[i].className = boxitem[i].className.replace(/(?:^|\s)show(?!\S)/g, '');
            }
            document.getElementById(href).className += " show";
            for (var i = 0; i < classname.length; i++) {
                classname[i].className = classname[i].className.replace(/(?:^|\s)active(?!\S)/g, '');
            }
            this.className += " active";
            span.className += 'active';
            var left = a.getBoundingClientRect().left;
            var top = a.getBoundingClientRect().top;
            var consx = (e.clientX - left);
            var consy = (e.clientY - top);
            span.style.top = consy + "px";
            span.style.left = consx + "px";
            span.className = 'clicked';
            span.addEventListener('webkitAnimationEnd', function (event) {
                this.className = '';
            }, false);
        };

        for (var i = 0; i < classname.length; i++) {
            classname[i].addEventListener('click', clickFunction, false);
        }

    });

    $(".tabitem a").click(function () {
        var classname = document.getElementsByClassName("tabitem");
        var boxitem = document.getElementsByClassName("box");
        var clickFunction = function (e) {
            e.preventDefault();
            var a = this.getElementsByTagName("a")[0];
            var span = this.getElementsByTagName("span")[0];
            var href = a.getAttribute("href").replace("#", "");
            for (var i = 0; i < boxitem.length; i++) {
                boxitem[i].className = boxitem[i].className.replace(/(?:^|\s)show(?!\S)/g, '');
            }
            document.getElementById(href).className += " show";
            for (var i = 0; i < classname.length; i++) {
                classname[i].className = classname[i].className.replace(/(?:^|\s)active(?!\S)/g, '');
            }
            this.className += " active";
            span.className += 'active';
            var left = a.getBoundingClientRect().left;
            var top = a.getBoundingClientRect().top;
            var consx = (e.clientX - left);
            var consy = (e.clientY - top);
            span.style.top = consy + "px";
            span.style.left = consx + "px";
            span.className = 'clicked';
            span.addEventListener('webkitAnimationEnd', function (event) {
                this.className = '';
            }, false);
        };

        for (var i = 0; i < classname.length; i++) {
            classname[i].addEventListener('click', clickFunction, false);
        }
    });

}

＆＃13;

.toolbar {
    background: #03A9F4;
}

.tabs {
    padding-top: 1%;
}

    .tabs ul {
        list-style: none;
        margin: 0;
        width: 100%;
        overflow: hidden;
        padding: 0;
    }

        .tabs ul li {
            float: right;
            width: 50%;
        }

    .tabs a {
        position: relative;
        color: white;
        text-decoration: none;
        display: block;
        width: 100%;
        text-align: center;
        line-height: 40px;
        font-weight: 500;
        font-size: 13px;
        color: #ecf0f1;
        overflow: hidden;
    }

    .tabs .active a {
        color: #fff;
    }

        .tabs .active a:after {
            height: 2px;
            width: 100%;
            display: block;
            content: " ";
            bottom: 0px;
            left: 0px;
            position: absolute;
            background: #f57c00;
            -webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;
            -moz-animation: border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;
            transition: all 1s cubic-bezier(0.4, 0.0, 1, 1);
        }

    .tabs a span {
        position: absolute;
        margin-left: -40px;
        margin-top: -24px;
        width: 80%;
        background: #f57c00;
        height: 100%;
        display: block;
        border-radius: 50%;
        opacity: 0;
    }

        .tabs a span.clicked {
            -webkit-animation: expand 0.6s cubic-bezier(0.1, 0.0, 0.4, 1) 0s normal;
            -moz-animation: expand 0.6s cubic-bezier(0.1, 0.0, 0.4, 1) 0s normal;
            border-bottom: 2px solid #f57c00;
        }

.content {
    box-shadow: inset 0px 5px 6px -3px rgba(0, 0, 0, 0.4);
    height: auto;
    padding-top: 50px;
    position: relative;
    top: 0px;
    overflow: hidden;
}

.box {
    display: none;
    overflow: auto;
    position: relative;
    overflow-x: hidden;
}

    .box.show {
        display: block;
    }

.box2 {
    display: none;
    overflow: auto;
    position: relative;
    overflow-x: hidden;
}

    .box2.show {
        display: block;
    }


@-webkit-keyframes expand {
    0% {
        /*background: rgba(255,255,141,1);*/
        /*opacity: 1;*/
        border-radius: 100%;
        /*transform: scale(0);
        -webkit-transform: scale(0);
        -moz-transform: scale(0);*/
    }

    50% {
        /*background: rgba(255,255,141,0.8);*/
        border-radius: 50%;
    }

    100% {
        /*background: rgba(255,255,141,0);*/
        /*transform: scale(3);*/
        border-radius: 0;
        /*-webkit-transform: scale(3);
        -moz-transform: scale(3);
        opacity: 1;*/
    }
}

@-moz-keyframes expand {
    0% {
        /*background: rgba(255,255,141,1);*/
        /*opacity: 1;*/
        border-radius: 100%;
        /*transform: scale(0);
        -moz-transform: scale(0);*/
    }

    50% {
        /*background: rgba(255,255,141,0.8);*/
        border-radius: 50%;
    }

    100% {
        /*background: rgba(255,255,141,0);*/
        /*transform: scale(3);*/
        border-radius: 0;
        /*-moz-transform: scale(3);
        opacity: 1;*/
    }
}

@-webkit-keyframes border-expand {
    0% {
        opacity: 0;
        width: 0;
    }

    100% {
        opacity: 1;
        width: 100%;
    }
}

@-moz-keyframes border-expand {
    0% {
        opacity: 0;
        width: 0;
    }

    100% {
        opacity: 1;
        width: 100%;
    }
}

＆＃13;

<div class="toolbar">
                    <div class="tabs">
                        <ul>
                            <li class="tabitem active"><a href="#box1">car<span></span></a></li>
                            <li class="tabitem"><a href="#box2">motor<span></span></a></li>
                        </ul>
                    </div>
                </div>
                <div class="content">
                    <div id="box1" class="box show">
                        ss
                    </div>
                    <div id="box2" class="box">
                        555
                    </div>
                </div>
                <div class="toolbar">
                    <div class="tabs">
                        <ul>
                            <li class="tabitem2 active"><a href="#box3">person<span></span></a></li>
                            <li class="tabitem2"><a href="#box4">company<span></span></a></li>
                        </ul>
                    </div>
                </div>
                <div class="content">
                    <div id="box3" class="box2 show">
                        ss
                    </div>
                    <div id="box4" class="box2">
                        555
                    </div>
                </div>

＆＃13;

＆＃13;

＆＃13;