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 ...
随机推荐
- SSM整合案例
使用IDEA整合SSM spring核心配置文件:beans_core.xml/applicationContext.xml <?xml version="1.0" enco ...
- Deep learning with PyTorch: A 60 minute blitz _note(1) Tensors
Tensors 1. construst matrix 2. addition 3. slice from __future__ import print_function import torch ...
- spring事务详细理解
数据并发的问题 一个数据库可能拥有多个访问客户端,这些客户端都可以并发方式访问数据库.数据库中的相同数据可能同时被多个事务访问,如果没有采取必要的隔离措施,就会导致各种并发问题,破坏数据的完整性.这些 ...
- 【grpc】spring boot+grpc的使用
spring boot+grpc的使用 参考:https://baijiahao.baidu.com/s?id=1573961922096412&wfr=spider&for=pc
- Windows Server 2003中报PerfDisk “无法从系统读取磁盘性能信息。
Windows Server 2003中报PerfDisk “无法从系统读取磁盘性能信息.”的问题解决 2015-01-22 09:49:02 标签:Windows Server2003 PerfDi ...
- Mac -- 安装及使用Docker
安装这三个软件. 有两个安装包: 和 安装完使用挺简的. 更多内容官网查看: https://docs.docker.com/
- boost exception jam0.exe 异常错误
在Windows 8 64 bit下执行boost_1_53_0的bootstrap.bat出现了jam0.exe执行错误 搜索网页发现需要修改两处文件: tools/build/v2/engine/ ...
- iOS开发 编码规范
转至 http://www.cnblogs.com/celestial/archive/2012/06/30/2571417.html 编码规范 一.文档结构管理 1.建立Libraries文件夹 ...
- 利用Thinkphp 5缓存漏洞实现前台Getshell
0×00 背景 网站为了实现加速访问,会将用户访问过的页面存入缓存来减小数据库查询的开销.而Thinkphp5框架的缓存漏洞使得在缓存中注入代码成为可能.(漏洞详情见参考资料) 本文将会详细讲解: 1 ...
- lowB三人组代码示例
冒泡排序:列表在内存重只存一份,所以不需要重复赋值 import random from timewrap import * #时间装饰器 # 初级版本 @cal_time def bubble_so ...