选项卡实现

Posted 2020-08-14 天天饱

实现效果：

JQ简单选项卡实现，实现原理：当点击选项卡栏目时为当前栏目添加一个class，然后通过index()获得其为第几个栏目，然后通过eq()选择对应的内容显示。

布局代码：

<style>
.tab{width: 245px;height: 160px;}
    .tab .tab_menu{width: 100%;height: 30px;border-bottom: 1px solid #ccc;text-align: left;}
    .tab .tab_menu li{width: 100px;height: 30px;line-height: 30px;text-align: center;float:left;background-color: #eee;margin-right: 2px;}
    .tab .tab_menu li:hover{cursor: pointer;*cursor: hand;background-color: #ddd;}
    .tab .tab_menu li.current{background-color: #1e8cd2;color: #fff;}
    .tab .tab_content{width: 100%;height: 129px;position: relative;overflow: hidden;}
    .tab .tab_content>div{width: 94%;height: 119px;display: block;padding: 5px 3%;position: absolute;left: 0;top:0;display: none;}
    .tab .tab_content>div li{width: 100%;line-height: 28px;height: 28px;overflow: hidden;display: inline-block;*display: inline;*zoom:1;}</style>

<div class="tab">
　　<!--栏目-->
    <div class="tab_menu">
        <ul>
            <li>栏目1</li>
            <li>栏目2</li>
        </ul>
    </div>
　　<!--内容-->
    <div class="tab_content">
        <div class="tab_container">
            <ul>
                <li>
                    <a href="">a</a>
                </li>
                <li>
                    <a href="">b</a>
                </li>
            </ul>
        </div>
        <div class="tab_container">
            <ul>
                <li>
                    <a href="">1</a>
                </li>
                <li>
                    <a href="">2</a>
                </li>
            </ul>
        </div>
    </div>
</div>

 JQ实现：

$(\'.tab_menu>ul>li:first\').addClass(\'current\');
var tabNum = $(\'.tab_menu>ul>li\').index($(\'.tab_menu>ul>li.current\'));
$(\'.tab_content .tab_container\').eq(tabNum).show();
$(\'.tab_menu>ul>li\').click(function(){
    var tabNumOld = $(\'.tab_menu>ul>li\').index($(\'.tab_menu>ul>li.current\'));
    var tabNumHover = $(\'.tab_menu>ul>li\').index(this);
    if(tabNumOld == tabNumHover){
        return false;
    }
    $(\'.tab_menu>ul>li\').finish().removeClass(\'current\').eq(tabNumHover).addClass(\'current\');
    $(\'.tab_content .tab_container\').finish().hide().eq(tabNumHover).show();
})

 最终效果

　　

• 栏目1
• 栏目2

　　

• a
• b

• 1
• 2