信鸽网

jQuery实现选项卡切换效果简单演示

  作者：bea

本文实例讲述了jQuery实现选项卡切换效果简单演示代码。分享给大家供大家参考。具体如下： 运行效果图如下 一、主体程序 <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>选项卡</title> <link type="text/css" rel="stylesheet" href="css/layout.css" /

本文实例讲述了jQuery实现选项卡切换效果简单演示代码。分享给大家供大家参考。具体如下：


运行效果图如下



一、主体程序




<!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程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: