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 相关文章推荐
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
JS 页面自动加载函数(兼容多浏览器)
May 18 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
Bootstrap网格系统详解
Apr 26 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
vue解决一个方法同时发送多个请求的问题
Sep 25 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
JS实现简单打字测试
Jun 24 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
点评山进PR-D3L三波段收音机
2021/03/02 无线电
php开发工具之vs2005图解
2008/01/12 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
ThinkPHP令牌验证实例
2014/06/18 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
python基础教程之元组操作使用详解
2014/03/25 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
Python合并多个Excel数据的方法
2018/07/16 Python
anaconda如何查看并管理python环境
2019/07/05 Python
Python求离散序列导数的示例
2019/07/10 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
Python超越函数积分运算以及绘图实现代码
2019/11/20 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
大专生自我鉴定范文
2013/10/01 职场文书
马云的职业生涯规划之路
2014/01/01 职场文书
试用期员工考核制度
2014/01/22 职场文书
中文专业自荐书
2014/06/29 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
护士年终个人总结
2015/02/13 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技