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 判断客户端浏览器类型代码
Mar 01 Javascript
无阻塞加载脚本分析[全]
Jan 20 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
实例讲解js验证表单项是否为空的方法
Jan 09 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
通过vue-cli3构建一个SSR应用程序的方法
Sep 13 Javascript
总结javascript三元运算符知识点
Sep 28 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 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
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
ThinkPHP控制器详解
2015/07/27 PHP
基于php判断客户端类型
2016/10/14 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
Python脚本后台运行的几种方式
2015/03/09 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
python版学生管理系统
2018/01/10 Python
python集合比较(交集,并集,差集)方法详解
2018/09/13 Python
python numpy元素的区间查找方法
2018/11/14 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
总结30个CSS3选择器
2017/04/13 HTML / CSS
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
法律系毕业生自荐信范文
2014/03/27 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
审美与表现自我评价
2015/03/09 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python