Fork me on GitHub

jquery特效（2）—选项卡

最近公司有个页面正好用到了选项卡，我就写了一下，感觉还不错，都挺简单的.

下面来看动态效果：

 

一、主体程序

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>选项卡</title>
        <link type="text/css" rel="stylesheet" href="css/layout.css" />
    </head>
    <body>
        <!--整体构局说明，用ul完成按钮的横向布局，用div完成三个内容框架的垂直布局（类似于类表），然后将三个内容框架全隐藏，通过下面的:first-child属性只将第一个框架内容显示出来-->
        <div class="tab">
            <div class="tab_menu">
            <ul>
                <li class="on">实事</li>
                <li>政治</li>
                <li>体育</li>
            </ul>
            </div>
            <div class="tab_box">
                <div>实事内容</div>
                <div>政治内容</div>
                <div>体育内容</div>
            </div>
        </div>
        <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
        <script type="text/javascript" src="js/layout.js"></script>
    </body>
</html>

 

 

二、CSS样式

初步布局代码：

*{ margin:0; padding:0}
ul{
    list-style: none;
}
.tab{
    width: 300px;
    margin: 0 auto;
}
.tab .tab_menu{
    border: 1px solid #000000;
    height: 30px;
    width: 300px;    
}
.tab .tab_menu ul li{
    float: left;
    width: 99px;
    text-align: center;
    line-height: 30px;
    border-right: 1px #333333 solid;
}
.tab .tab_menu ul li:last-child{
    border-right:none;
    width: 100px;
}
.tab .tab_menu ul li.on{
    background: #999;
}
.tab .tab_box > div{
    width: 300px;
    height: 200px;
    border: #333333 solid;
    border-width: 0 1px 1px 1px;
}

 

上面代码实现的布局图如下：

但是我们只需要一个框架里面的内容进行显示，所以在上面代码的前提下添加一些小代码辅助就可以了.

进一步布局样式代码：

*{ margin:0; padding:0}
ul{
    list-style: none;
}
.tab{
    width: 300px;
    margin: 0 auto;
}
.tab .tab_menu{
    border: 1px solid #000000;
    height: 30px;
    width: 300px;    
}
.tab .tab_menu ul li{
    float: left;
    width: 99px;
    text-align: center;
    line-height: 30px;
    border-right: 1px #333333 solid;
}
.tab .tab_menu ul li:last-child{
    border-right:none;
    width: 100px;
}
.tab .tab_menu ul li.on{
    background: #999;
}
.tab .tab_box > div{
    width: 300px;
    height: 200px;
    border: #333333 solid;
    border-width: 0 1px 1px 1px;
    display: none;                    //将三个内容框架全隐藏，通过下面的:first-child属性只将第一个框架内容显示出来
}
.tab .tab_box > div:first-child{
    display: block;
}

上面程序给.tab .tab_box > div样式多添加了一个display：none，另外还通过:first-child属性只将第一个框架内容显示出来,这样我们看到的布局就和我上面刚开始放的动画效果图保持一致了，布局也算是完成了.

 

三、Jquery代码：

$(function(){
    $(".tab_menu ul li").click(function(){
        $(this).addClass("on").siblings().removeClass("on");    //切换选中的按钮高亮状态
        var index=$(this).index();   //获取被按下按钮的索引值，需要注意index是从0开始的
        $(".tab_box > div").eq(index).show().siblings().hide();  //在按钮选中时在下面显示相应的内容，同时隐藏不需要的框架内容
    });
});

额，看到那么短的Jquery代码我也是醉了，布局写了那么长一段代码，Jquery只写了5句话就搞定了,注释我已经写的很清楚了，感兴趣的可以看看吧.

 

posted @ 2015-10-09 09:43  半亩花田  阅读(686)  评论(0)    收藏  举报