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 ...
随机推荐
- LINUX___的常用几个快捷键
linux下:ctrl-c 发送 SIGINT 信号给前台进程组中的所有进程.常用于终止正在运行的程序.ctrl-z 发送 SIGTSTP 信号给前台进程组中的所有进程,常用于挂起一个进程.ctrl- ...
- Typora +google + Markdown Here 公众号
一劳永逸的公众号排版方法 http://mp.weixin.qq.com/s/zb-YaacNLggG2-njF5HJ0A
- openfire Android学习(六)----总结
Xmpp的一些方法整理到一个工具类中了 XmppConnection.java [java] view plaincopy [java] view plaincopy import java.io.B ...
- CheckedListBoxControl 或CheckedListBox 控件中显示水平滚动条 z
public partial class Form1 : Form { public Form1() { InitializeComponent(); DisplayHScroll(); } /// ...
- servlet基础梳理（一）
将近一个月没看servlet了,再加上第一次学习也没有深入.仅仅是笼统的看了一遍,编了一点基础案例就过去了,如今再去看感觉跟没学过一样.这里再用一点时间把这些基础都梳理一下,加深印象并为以后高速复习做 ...
- C 标准库 - <limits.h>
C 标准库 - <limits.h> 简介 limits.h 头文件决定了各种变量类型的各种属性.定义在该头文件中的宏限制了各种变量类型(比如 char.int 和 long)的值. 这些 ...
- Objective-C基础笔记（6）Block
Block(代码段)封装了一段代码,能够在不论什么时候运行. Block能够作为函数參数或者函数返回值,而其本身又能够带输入參数或返回值.它和传统的函数指针非常相似,可是有差别:block是inlin ...
- 修改Qweb报表
Table of Contents 将报表的类型改为HTML 打印HTML格式报表 使用html editor 修改报表模板 使用Web builder修改报表 恢复报表格式 将报表的 ...
- LINUX下目标文件的BSS段、数据段、代码段
http://blog.chinaunix.net/uid-27018250-id-3867588.html bss 未初始化的全局数据 data 已经初始化的全局数据 text 代码段,机器指令 r ...
- Hadoop 源码阅读技巧
http://www.cnblogs.com/xuxm2007/category/388607.html 个人谈谈阅读hadoop源代码的经验.首先,不得不说,hadoop发展到现在这个阶段, ...