jQuery实现选项卡功能(两种方法)


Posted in Javascript onMarch 08, 2017

效果图:

jQuery实现选项卡功能(两种方法)

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
 <title>JQuery 源码分析</title>
 <style>
 #div1 div{width: 200px;height: 200px;border: 1px solid #FF0000;display: none;}
 .active{background: red;}
 *{margin: 0;padding: 0;}
 .tab:after{content: '';display: block;clear: both;}
 .tab li{width: 150px;height: 30px;line-height: 30px;text-align: center;cursor: pointer;list-style: none;float: left;margin: 0 10px;background: #ABCDEF;border-radius: 5px;}
 .tab li.active{background: #000;color:#fff;}
 .content:after{content: '';display: block;clear: both;}
 .content li{width: 460px;height: 300px;padding:20px;background: #f7f7f7;display: none;}
 </style>
 </head>
 <body>
 <div id="div1">
 <input class="active" type="button" value="1" />
 <input type="button" value="2"/>
 <input type="button" value="3"/>
 <div style="display: block;">11111111111</div>
 <div>22222222222</div>
 <div>333333333333</div>
 </div>
 <ul class="tab">
 <li class="active">1</li>
 <li>2</li>
 <li>3</li>
 </ul>
 <ul class="content">
 <li style="display: block;">111111111111</li>
 <li>222222222222</li>
 <li>333333333333</li>
 </ul>
 <script>
 $(function(){
 //jQuery 方法一
 $('#div1').find('input').click(function(){
 $('#div1').find('input').attr('class','');
 $('#div1').find('div').css('display','none')
 $(this).attr('class','active');
 $('#div1').find('div').eq($(this).index()).css('display','block');
 });
 //jQuery 方法二
 $('.tab').find('li').click(function(){
 var index = $(this).index();
 $(this).addClass('active').siblings().removeClass('active');
 $('.content').find('li').eq(index).show().siblings().hide();
 })
 })
 </script>
 </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
AngularJS中的过滤器filter用法完全解析
Apr 22 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
原生js轮播特效
May 18 Javascript
php 修改密码实现代码
May 24 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 #Javascript
JS仿JQuery选择器功能
Mar 08 #Javascript
vue数据双向绑定原理解析(get &amp; set)
Mar 08 #Javascript
footer定位页面底部(代码分享)
Mar 07 #Javascript
vue父子组件的数据传递示例
Mar 07 #Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 #Javascript
完美实现js焦点轮播效果(一)
Mar 07 #Javascript
You might like
php利用cookie实现访问次数统计代码
2011/05/19 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
python中如何使用朴素贝叶斯算法
2017/04/06 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
解决python线程卡死的问题
2019/02/18 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
《放小鸟》教学反思
2014/04/20 职场文书
商场促销活动总结
2014/07/10 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
未来,这5大方向都很适合创业
2019/07/22 职场文书
Go语言特点及基本数据类型使用详解
2022/03/21 Golang