（效果三）js实现选项卡切换

开发了很久的小程序，在接到一个h5移动端页面的时候，很多原生的东西都忘了，虽然说我们随着工作经验的增加，处理业务逻辑的能力在提高，但是基础的东西如果长时间不用，也会逐渐忘记。所以以后会经常总结原生的一些知识，一边后面自己忘记时，提供查询之所。

HTML

 

   <div class="wraper">
        <div class="header">
            <div class="search"><a href=""><img src="image/search.png" alt="">请输入名称进行搜索</a></div>
            <div class="tab">
                <div class="nav active"><a href="javascript:;">药品价格</a></div>
                <div class="nav"><a href="javascript:;">非药品价格</a></div>
            </div>
    </div>
    <div class="section">
        <div class="med-hd">
            <div class="name pink">名称</div>
            <div class="guige pink">规格</div>
            <div class="yblx pink">医保类型</div>
            <div class="jine oriange">金额</div>
        </div>
        <div class="med-bd focus">
            <div class="row">
                <div class="name a">小儿复方氨酚烷胺颗粒</div>
                <div class="guige">60ml/瓶</div>
                <div class="yblx cir">甲类</div>
                <div class="jine">35.5</div>
            </div>
        </div>
        <div class="med-bd">
            <div class="row">
                <div class="name a">小儿咽扁颗粒</div>
                <div class="guige">60ml/瓶</div>
                <div class="yblx cir">甲类</div>
                <div class="jine">35.5</div>
            </div>
        </div>
    </div>
</div>

　　

 

CSS

/*项目查询*/

body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,img,input{
    margin:0;
    padding:0;
}
html {
    font-size: 26.67vw;
}
html,body{
    height: 100%;
}
.wraper{
    height: 100%;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    background-color: #f1f1f1;
}
a {
    text-decoration: none;
}
 
a:link{
    color: #404040;
}
a:visited{
    color: #404040;
}
a:hover{
    color: #404040;
}
a:active {
    color: #404040;
}
ul,ol{
    list-style:none;
}
img{
    border: 0;
    display: block;
}
 
.header{
    width: 100%;
    height: 214px;
    height: 1.07rem;
}
.header .search {
    width: 100%;
    height: 120px;
    height: 0.6rem;
    background-color: #ff4f8d;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff4f8d;
    box-sizing: border-box;
    padding: 0.1rem 0.09rem;
}
.header .search a {
    display: flex;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    align-items: center;
    font-size: 0.14rem;
    box-sizing: border-box;
    color: #fff;
    background-color: #e6477f;
}
.header .search img {
    width: 0.15rem;
    height: 0.15rem;
    margin: 0 0.14rem 0 0.12rem;
    vertical-align: middle;
}
.tab {
    width: 100%;
    height: 0.45rem;
    background-color: #fff;
    box-sizing: border-box;
    border-top: 1px solid #f1f1f1;
    display: flex;
    align-items: center;
}
.tab .nav {
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 4px solid transparent;
    font-size: 0.17rem;
}
.tab .nav.active {
    border-bottom: 4px solid #ff4f8d;
}
.tab .nav.active a {
    color: #ff4f8d;
}
.tab .nav a {
    color: #404040;
}
.medical-hd {
    width: 100%;
}
.section{
    width: 100%;
    flex: 1;
    background-color: #f1f1f1;
    padding: 20px 24px 0;
    padding: 0.1rem 0.12rem 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.med-hd {
    width: 100%;
    height: 70px;
    height: 0.35rem;
    box-sizing: border-box;
    color: #fff;
    font-size: 28px;
    font-size: 0.14rem;
    display: flex;
    align-items: center;
    text-align: center;
}
.name {
    width: 242px;
    width: 1.21rem;
    border-right: 1px solid #f2f2f2;
    box-sizing: border-box;
}
.guige {
    width: 148px;
    width: 0.74rem;
    border-right: 1px solid #f2f2f2;
    box-sizing: border-box;
}
.yblx {
    width: 161px;
    width: 0.85rem;
}
.jine {
    width: 151px;
    width: 0.755rem;
}
.name,.guige,.yblx,.jine {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pink {background-color: #ff4f8d;}
.oriange {background-color: #ff990a;}
 
.med-bd{
    width: 100%;
    flex: 1;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #fff;
    display: none;
}
.med-bd.focus{
    display: block;
}
.med-bd .row{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    flex-direction: row;
    font-size: 0.14rem;
    color: #404040;
    border-bottom: 1px solid #f2f2f2;
}
.row div {
    overflow: hidden;
    height: auto;
    min-height: 0.45rem;
    _height: 0.45rem;
    box-sizing: border-box;
}
.cir {
    border-right: 1px solid #f2f2f2;
}
.a {
    padding-left: 0.1rem;
    box-sizing: border-box;
}

 

JS

var oNav = document.querySelectorAll('.nav');
var oCont = document.querySelectorAll('.med-bd');
oNav.forEach(function (item,index,array) {
    item.onclick = function () {
        oNav.forEach( (item,index,array) => {
            item.className = "nav";
            oCont[index].className = "med-bd";
        });
        item.className = "nav active";
        oCont[index].className = "med-bd focus";
    }
});