tab页签切换

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xiongdaandxiaomi/article/details/85298330

效果

css

.tab{
    position: relative;
    width:100%;
}
.tab-head{
    width: 1200px;
    height:100%;
    margin: auto;
    font-size: 0;
}
.classifyTip{
    width: 93px;
    height: 48px;
    line-height: 48px;
    background-image: linear-gradient(0deg,
    #6a97e2 0%,
    #63a1f1 50%,
    #5babff 100%);
    display: inline-block;
    overflow: hidden;
    font-size: 14px;
    letter-spacing: 0px;
    color: #ffffff;
    text-align: center;
}
.lidiv{
    border: solid 1px #e7e7e7;
    display: inline-block;
    width: calc(100% - 100px);
    box-sizing: border-box;
    height: 48px;
}
.tab-head li{
    width: 100px;
    display: inline-block;
    height: 100%;
    /* background-color: #006aba; */
    overflow: hidden;
    line-height: 43px;
    text-align: center;
    font-size: 14px;
}
li.selected{
    border-bottom: 2px #6a97e2  solid;
    color: #6a97e2;
}
.tab-content{
    width: 1200px;
    min-height:200px;
    margin: auto;
    font-size: 14px;
    margin-bottom: 30px;
}
.tab-content > div{
    display: none;
}
.tab-content .show{
    display: block;
}

html

  <div class="tab">
            <div class="tab-head ">
                <div class="classifyTip">分类</div>
                <div class="lidiv">
                    <li class="selected">常规品种</li>
                    <li>非常规品种</li>
                </div>

            </div>
            <div class="tab-content">
                <div class="show">
                    tab1内容
                </div>
                <div>
                  tab2内容
                </div>
            </div>
        </div>

js部分

 /**
     * 产品中心tab切换
     * */
    $(function () {
        var tabs = document.getElementsByClassName('tab-head')[0].getElementsByTagName('li'),
            contents = document.getElementsByClassName('tab-content')[0].getElementsByTagName('div');
        console.log("tabs",tabs,contents);
        (function changeTab() {
            for(var i = 0, len = tabs.length; i < len; i++) {
                tabs[i].onmouseover = showTab;
            }
        })();

        function showTab() {
            for(var i = 0, len = tabs.length; i < len; i++) {
                if(tabs[i] === this) {
                    tabs[i].className = 'selected';
                    contents[i].className = 'show';
                } else {
                    tabs[i].className = '';
                    contents[i].className = '';
                }
            }
        }
    })