自己做的简单选项卡_用visibility如何做选项卡-CSDN博客

本文链接：https://blog.csdn.net/uchaoxi/article/details/75033062

<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./css/tab.css">
</head>

<body>
    <div class="simple_tab">
        <div tab_header>
            <div class="tab tabselect" index=0>jquery教程<span class="arrow arrowselect"></span></div>
            <div class="tab tabnormal" index=1>javascript教程<span class="arrow arrownormal"></span></div>
            <div class="tab tabnormal" index=2>html教程<span class="arrow arrownormal"></span></div>
            <div class="tab tabnormal" index=3>angularjs教程<span class="arrow arrownormal"></span></div>
        </div>
        <div class="tab_content">
            <div class="content contentselect">11111111111111</div>
            <div class="content contentnormal">22222222222222</div>
            <div class="content contentnormal">33333333333</div>
            <div class="content contentnormal">44444444444444444</div>
        </div>
    </div>

    <script>
        var tabarray = document.getElementsByClassName("tab");
        var arrowarray = document.getElementsByClassName("arrow");
        var contentarray = document.getElementsByClassName("content");
        for (var i = 0; i < tabarray.length; i++) {
            tabarray[i].addEventListener("click", a);
        }
        function a(event) {
            var index = event.target.getAttribute("index");
            console.log(index);
            for (var i = 0; i < tabarray.length; i++) {
                setClass(tabarray[i], "tab tabnormal");
                setClass(tabarray[i].lastChild, "arrow");
                setClass(contentarray[i], "content contentnormal");
            }
            setClass(event.target, "tab tabselect");
            setClass(event.target.lastChild, "arrow arrowselect");
            setClass(contentarray[index], "content contentselect");

        }

        function setClass(element, cla) {
            element.className = cla;
        }

    </script>
</body>

</html>

.simple_tab{
    display: block;
    height:40px;

}

.simple_tab .tab{
    display: inline-block;
    margin-left: -5px;
    width:150px;
    text-align: center;
    padding: 0px 0px;
    vertical-align: middle;

}
.simple_tab .tabnormal{
    border-bottom: 1px solid grey; 
}

.simple_tab .tabselect{
    border-bottom: 1px solid blue;
}

.simple_tab  .arrow{
    position: relative;
    left:65px;
    top:0px;
    display: block;
    height:0;
    width:0;
    border: 5px solid;
    border-top: 0;
    border-color:transparent transparent blue transparent ;
  visibility:hidden;
}
.simple_tab  .arrownormal{

    visibility:hidden;
}

.simple_tab .arrowselect{

    visibility:visible;
}
.simple_tab .content{
    width:600px;
    height:400px;
   background-color: #dbdbdb;

}
.simple_tab .contentnormal{
  display: none;

}
.simple_tab .contentselect{
  display: block;
   margin-left: -5px;
    margin-top:5px;

}