自己做的简单选项卡

来源：互联网发布：堆和栈的区别java 编辑：程序博客网时间：2024/05/20 20:04

<!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;}

阅读全文

0 0