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


Posted in Javascript onDecember 09, 2015

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

运行效果图如下

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;
}

上面的代码实现布局如下:

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

但是我们只需要一个框架里面的内容进行显示,所以在上面代码的前提下添加一些小代码辅助就可以了~~~~~~

进一步布局样式代码:

*{ 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(); //在按钮选中时在下面显示相应的内容,同时隐藏不需要的框架内容
 });
});

如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

希望本文所述对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
jquery特效 点击展示与隐藏全文
Dec 09 #Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 #Javascript
js实现微信分享代码
Oct 11 #Javascript
JavaScript观察者模式(经典)
Dec 09 #Javascript
常用的Javascript设计模式小结
Dec 09 #Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 #Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 #Javascript
You might like
PHP.MVC的模板标签系统(一)
2006/09/05 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
js静态作用域的功能。
2006/12/25 Javascript
javascript据option的value值快速设定初始的selected选项
2007/08/13 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
JavaScript中的await/async的作用和用法
2016/10/31 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python装饰器decorator用法实例
2014/11/10 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
python em算法的实现
2020/10/03 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
Currentbody美国/加拿大:美容仪专家
2020/03/09 全球购物
如何在发生故障的节点上重新安装 SQL Server
2013/03/14 面试题
应聘销售主管的求职信
2014/04/26 职场文书
认错检讨书
2014/10/02 职场文书
大学生学年个人总结
2015/02/15 职场文书
民事辩护词范文
2015/05/21 职场文书
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python