网页选项卡的实现

在我们做页面时会有，一些选项卡的功能，点击上面选项卡时，下面相应的内容也会变化,如下图所示是智联招聘选项卡：
这里写图片描述
那我们就以此为例，实现一下

选项卡的原理比较简单，通过隐藏和显示来切换和显示来切换不同的内容

首先构建HTML结构，代码如下：

    <div class="tab">
        <div class="tab_menu">
            <ul>
                <li class="selected">首页</li>
                <li>职位置顶</li>
                <li>智能刷新</li>
                <li>约聊</li>
                <li>保面试</li>
            </ul>
        </div>

        <div class="tab_box">
            <div>首页</div>
            <div class="hide">职位置顶</div>
            <div class="hide">智能刷新</div>
            <div class="hide">约聊</div>
            <div class="hide">保面试</div>
        </div>
    </div>

2.设置CSS样式,代码如下：

.tab_menu ul li {
            display: inline-block;
            cursor: pointer;
            padding: 5px 10px;
        }

        .selected {
            background: blue;
            padding: 5px 10px;
            border-radius: 4px;
            color: #fff;

        }

        .hover{
            background: #ccc;
            padding: 5px 10px;
            border-radius: 4px;
        }

        .tab_box div {
            border: 1px solid red;
            height: 150px;
            width: 500px;
        }

        .hide{
            display: none;
        }

默认情况是第一个选项卡被选中，然后下面区域显示相应的内容,如下图：

这里写图片描述
当我们点击其他的选项卡时，那么其相应的内容也应该显示，接下来就要我们将要实现这个大致的过程

首先为 li 元素绑定点击事件，代码如下

$('div.tab li').click(function(){
    //......
}

绑定后，将当前点击的 li 元素高亮，去掉其他同辈 li 元素的亮度

$('div.tab li').click(function(){                
      $(this).addClass('selected').siblings()
             .removeClass('selected');
}

我们需要将选项卡相关的内容显示出来，从HTML结构可知，每个 li 元素分别对应相应的 div 区域，因此可以根据当前单击当前的 li 元素所在的索引，来对应相应的区域

$('div.tab li').click(function(){
            $(this).addClass('selected').siblings().removeClass('selected');
            var index=$(this).index();
            $('div.tab_box>div').eq(index).show().siblings().hide();
        })

在上边代码中，$('div.tab_box>div')这个子选择器，如果使用$('div.tab_box div')选择器，当子节点再包含 div 元素时，就会引起程序混乱

我们可以添加鼠标滑动时的情况，总体代码如下：

$('div.tab li').click(function(){
            $(this).addClass('selected').siblings().removeClass('selected');
            var index=$(this).index();
            $('div.tab_box>div').eq(index).show().siblings().hide();
        }).hover(function(){
            $(this).addClass('hover');
        },function() {
            $(this).removeClass('hover');
        })

网页选项卡的实现

猜你喜欢