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:

.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:

        // 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'
            }
        }