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中的location用法简单介绍
Mar 07 Javascript
js 自定义的联动下拉框
Feb 07 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
bootstrap实现动态进度条效果
Mar 08 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
Mar 14 Javascript
vue 使用原生组件上传图片的实例
Sep 08 Javascript
js实现简单图片拖拽效果
Feb 22 Javascript
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写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
jquery模拟按下回车实现代码
2011/09/20 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
Django Rest framework权限的详细用法
2019/07/25 Python
Python urllib3软件包的使用说明
2020/11/18 Python
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
应届生学校辅导员求职信
2013/11/07 职场文书
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
端午节活动策划方案
2014/03/09 职场文书
酒鬼酒广告词
2014/03/21 职场文书
大专生找工作自荐书
2014/06/10 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
MySQL如何构建数据表索引
2021/05/13 MySQL
Python利用folium实现地图可视化
2021/05/23 Python
go web 预防跨站脚本的实现方式
2021/06/11 Golang
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers