前端tab切换—sinye

简单样式tab切换，方便根据自己需求修改样式。

html

<div class="sinye_tab">
    <div class="sinye_tab_item">切换至一</div>
    <div class="sinye_tab_item">切换至二</div>
</div>
<div class="sinye_tab_content">
    <div class="sinye_tab_item">
        1
    </div>
    <div class="sinye_tab_item">
        2
    </div>
</div>

css

.sinye_tab{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #ccc;
}
.sinye_tab .sinye_tab_item{
    padding: 15px 0px 5px;
    margin: 0 20px;
    cursor: pointer;
}
.sinye_tab .sinye_tab_item.on{
    position: relative;
    color: #009afe;
}
.sinye_tab .sinye_tab_item.on::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 2px;
    background-color: #009afe;
    bottom: -1px;
    z-index: 2;
    left: 0;
}
.sinye_tab_content .sinye_tab_item{
    display: none;
    padding: 15px 20px;
}
.sinye_tab_content .sinye_tab_item.on{
    display: block;
}

js

使用了jq，所以使用前需要先引入jq

function sinye_tab(){
    $('.sinye_tab .sinye_tab_item').eq(0).addClass('on')
    $('.sinye_tab_content .sinye_tab_item').eq(0).addClass('on')
    $('.sinye_tab .sinye_tab_item').click(function(){
        $('.sinye_tab .sinye_tab_item').removeClass('on')
        $('.sinye_tab_content .sinye_tab_item').removeClass('on')
        let index = $(this).index()
        $('.sinye_tab .sinye_tab_item').eq(index).addClass('on')
        $('.sinye_tab_content .sinye_tab_item').eq(index).addClass('on')
    })
}
// 初始化tab
sinye_tab()