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;
}

 

好了 ，這樣就完成了