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 08 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
js实现全选和全不选功能
Jul 28 Javascript
详解Vue数据驱动原理
Nov 17 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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 文件缓存的性能测试
2010/04/25 PHP
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
javascript 鼠标拖动图标技术
2010/02/07 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
Python中无限元素列表的实现方法
2014/08/18 Python
Python的动态重新封装的教程
2015/04/11 Python
在windows系统中实现python3安装lxml
2016/03/23 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
python 不以科学计数法输出的方法
2018/07/16 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
深入了解Python 方法之类方法 &amp; 静态方法
2020/08/17 Python
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
质量保证书格式
2015/02/27 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
商业计划书格式、范文
2019/03/21 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
LayUI+Shiro实现动态菜单并记住菜单收展的示例
2021/05/06 Javascript
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
Python 中数组和数字相乘时的注意事项说明
2021/05/10 Python
python实现双向链表原理
2022/05/25 Python