你的位置:首页 > Java教程

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