js点击按钮出现相应内容（tab切换）

<!--html-->
<!--tab-->
 <div class="top  ">
        <div class="top_bar flex">
            <div class="top_bar_b fot-size30 bg_color566">最新</div>
            <div class="top_bar_b fot-size30 bg_color627">关注</div>
            <div class="top_bar_b fot-size30 bg_color627">全部</div>
        </div>
 </div>
 <!--body-->
    <div class="body ">
        <div class="body_b display_b">
            <ul class="card_box br">
                <li class="card_title mar-bot20 flex br">
                    <div class="card_t">
                        <img src="" alt="" class="card_photo">
                    </div>
                    <div class="card_t"></div>
                </li>
                <li class="card_img mar-bot20"><!---->
                    <img src="" alt="" class="img">
                </li>
                <li class="card_des">
                    <p class="fot-size20"></p>
                </li>
            </ul>
        </div>
        <div class="body_b display_n">
            <p>关注</p>
        </div>
        <div class="body_b display_n">
            <p>全部</p>
        </div>
    </div>
复制代码

<!--css-->
.top{
    width: 100%;
    height: 1.7rem;
    background-color: #778fe5;
    padding: 0.3rem 0.25rem;

}
.top_bar{
    height: 0.6rem;
    border-radius: 0.2rem;
    font-size: 0;
    overflow: hidden;
}
.top_bar_b{
    width: 33%;
    border: 0.01rem solid #778fe5;
    color: white;
    text-align: center;
    line-height: 0.6rem;
    /*font-size: 0.30rem;*/

}
.img{
    height: 100%;
    width: 100%;
}
.flex{
    display: flex;
    justify-content: space-between;
}
.fot-size30{
    font-size: 0.30rem;
}
.fot-size20{
    font-size: 0.20rem;
}
.bg_color566{
    background-color: #5668a6;
}
.bg_color627{
    background-color: #6278cd;
}
.display_b{
    display: block;
}
.display_n{
    display: none;
}
.br{
    border: 0.01rem solid gainsboro;
}
.body{
    height: 0;
    flex-grow: 1;
    z-index: 1;
    overflow: scroll;
}
.body_b{
    height: 100%;
    width: 100%;
    padding: 0.25rem 0.25rem;
    overflow: auto;

}
.card_box{
    height: 4.05rem;
}
.card_title{
    height: 0.67rem;

}
.card_t{
    width: 50%;
    height: 100%;
}
.card_img{
    height: 2.56rem;

}
.card_des{
    height: 0.5rem;
}
复制代码

<!--js-->
window.onload=function () {
    function tab() {
        var tab = document.getElementsByClassName('top_bar_b');
        var body = document.getElementsByClassName('body_b');
        for (let i =0;i<tab.length;i++){
            tab[i].onclick = function () {
                for (let j=0;j<body.length;j++){
                    tab[j].classList.remove('bg_color566'); /*把当选色移除*/
                    tab[j].classList.add('bg_color627'); /*给每个框底色*/
                    body[j].classList.remove('display_b');
                    body[j].classList.add('display_n');
                }
                tab[i].classList.add('bg_color566'); /*给当前选中的tab选中色*/
                body[i].classList.remove('display_n');
                body[i].classList.add('display_b');
                console.log(body[i]);
            }
        }
    }
    tab();
}

复制代码

由于整个项目使rem做自适应。需要的朋友可以把rem按100的比例换成px。不过不换也不会影响功能就对了~

转载于:https://juejin.im/post/5c416759e51d45522161100c