js标签栏（tab栏）切换

html:

                <div class="tabs col-md-6">
                    <ul id="nav">
                        <li class="nav_item"><a href="javascript:;" class="">学院新闻</a></li>
                        <li class="nav_item"><a href="javascript:;" class="">通知公告</a></li>
                        <li class="nav_item"><a href="javascript:;" class="">党建动态</a></li>
                        <li class="nav_item"><a href="javascript:;" class="">科研动态</a></li>
                    </ul>
                    <div class="nav_con">内容1</div>
                    <div class="nav_con">内容2</div>
                    <div class="nav_con">内容3</div>
                    <div class="nav_con">内容4</div>
                </div>

css:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

.tabs{     height: 436px;     background-color: #09f;     position: relative; } #nav{     overflow: hidden;     list-style: none;   } #nav li{     background-color: red;     height: 40px;     line-height: 40px;     text-align: center;     margin-right: 10px;     float: left; } .nav_con{     background-color: red;     position: absolute;     left: 0;     top: 50px;     width: 100%;     height: 200px; }

js:

?

1 2 3 4 5 6 7 8 9 10 11

// tab栏切换 let navs = document.getElementsByClassName('nav_item') let cons = document.getElementsByClassName('nav_con') for (let i = 0; i < navs.length; i++) {     navs[i].onclick = function () {         for (let i = 0; i < cons.length; i++) {             cons[i].style.display = 'none'         }         cons[i].style.display = 'block'     } }