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句话就搞定了,注释我已经写的很清楚了，感兴趣的可以看看吧.
jquery特效（2）—选项卡的更多相关文章
- 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效
基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...
- jQuery实现TAB选项卡切换特效简单演示
本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...
- js进阶 11-24 jquery如何实现选项卡的制作
js进阶 11-24 jquery如何实现选项卡的制作 一.总结 一句话总结:ul>li做选项卡的选项卡头,多个div做选项卡的内容,点到对应的li,就切换到对应的div,用index()获取l ...
- 鼠标滑过图片变暗文字链接滑出jQuery特效
效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...
- 图片左右间隔滚动Jquery特效
图片左右间隔滚动Jquery特效,支持自动播放的开启与关闭,同时支持左右箭头的点击播放,具体处理程序如下 <!DOCTYPE html > <html> <head> ...
- Web设计师值得收藏的10个jQuery特效
jQuery已经不是什么新鲜的事儿,以前总把它认为是非常难的东西,也就没有认真去了解他了.直到学完CSS的大部分内容,才开始接触这种"write less, do more" 的J ...
- 分享一组很赞的 jQuery 特效【附源码下载】
作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些 ...
- jQuery 特效：盒子破碎和移动动画效果
今天,我们将创建一个使用 jQuery 制作的非常甜蜜的动画效果.我们的想法是在网站的顶部有小盒子,当一个菜单项被点击时,箱子动画形成的主要内容区域分散在各处.我们会用一些不同的动画效果,我们将为菜单 ...
- JQuery特效分享网站
各种jquery特效分享,可以去上面找资源. http://www.jqshare.com/
- 一款兼容IE6并带有多图横向滚动的jquery特效
一款兼容IE6并带有多图横向滚动的jquery特效,自动切换多个图片的jquery特效效果, 为大家分享这个的原因是,这款特效在兼容IE6上面很完美,实用性就广很多了. 适用浏览器:IE6.IE7.I ...
随机推荐
- ABP开发框架前后端开发系列---（2）框架的初步介绍
在前面随笔<ABP开发框架前后端开发系列---(1)框架的总体介绍>大概介绍了这个ABP框架的主要特点,以及介绍了我对这框架的Web API应用优先的一些看法,本篇继续探讨ABP框架的初步 ...
- Access自定义函数(人民币大写）
人民币大写函数:整数不超过13位. Public Function 人民币大写(A) As String Dim aa As String Dim bb As String Dim cc As Str ...
- Maven plugin提示错误“Plugin execution not covered by lifecycle configuration”
myeclipse在其POM文件的一处提示出错如下: Plugin execution not covered by lifecycle configuration: org.apache.maven ...
- webpack 项目实战
步骤一: npm init 步骤二: npm install -D clean-webpack-plugin css-loader extract-text-webpack-plugin html-w ...
- POJ2376 Cleaning Shifts 【贪心】
Cleaning Shifts Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 11542 Accepted: 3004 ...
- 浅析nodejs的buffer类
1.什么时候该用buffer,什么时候不该用 看一下如下的测试代码,分别是拼接各种不同长度的字符串,最后直接拼接了10MB的字符串 var string,string2,string3; var bu ...
- 每天一个linux命令（23）：Linux 目录结构（转）
对于每一个Linux学习者来说,了解Linux文件系统的目录结构,是学好Linux的至关重要的一步.,深入了解linux文件目录结构的标准和每个目录的详细功能,对于我们用好linux系统只管重要,下面 ...
- mysql优化之索引建立的规则
索引经常使用的数据结构为B+树.结构例如以下 如上图,是一颗b+树,关于b+树的定义能够參见B+树,这里仅仅说一些重点.浅蓝色的块我们称之为一个磁盘块,能够看到每一个磁盘块包括几个数据项(深蓝色所看到 ...
- 【BZOJ4950】lydsy七月月赛 C 二分图最大匹配
[BZOJ4950]lydsy七月月赛 C 题面 题解:比较直接的想法就是:每行,每列的最大值都留下,剩下的格子都变成1.但是如果一个格子既是行的最大值又是列的最大值,那么我们只需要把它留下即可.这就 ...
- if __name__ == "__main__"： 怎么理解?
参考:https://www.cnblogs.com/Neeo/p/9504779.html 总结: 1.防止模块间调用时,执行被调用模块实例化执行,换句话说,就是不要执行调用模块原来实例化的内容 2 ...