js tab菜单切换

如有不对的地方，望各路大神指点，小女子在此谢过(*^__^*) 嘻嘻……

 

一、先看下效果图

 

二、html内容

<div class="hot-list">
    <div class="hot-list-container">
        <div class="">涨幅榜</div>
        <div class="">跌幅榜</div>
        <div class="">成交额榜</div>
    </div>
    <div class="hot-list-container">
        <div class="">换手率榜</div>
        <div class="">成交量榜</div>
        <div class="">振幅榜</div>
    </div>
</div>

三，js内容

   //默认选中第一个
    $('.hot-list-container div:first').addClass('hot-list-container-bg');
    //点击菜单栏
    $('.hot-list-container div').click(function () {
        //先移除所有的
        $('.hot-list-container div').removeClass('hot-list-container-bg')
        //给当前点击得div,加样式
        $(this).addClass('hot-list-container-bg')
    })

四、hot-list-container-bg是css的样式，就是点击后应该改变的样式，

.hot-list-container-bg {
    border: #FE3838 solid 0.014rem;
    border-radius: 0.07rem;
    background: #FFFFFF;
    color: #FE3838;
}

 

好了 ，这样就完成了