jquery特效(2)—选项卡

12/6/2015来源:Javascript教程人气:818

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

下面来看动态效果:

 

一、主体程序

<!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句话就搞定了~~~注释我已经写的很清楚了,感兴趣的可以看看吧~~~~