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 相关文章推荐
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
Jan 23 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
JS实现复制功能
Mar 01 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
Jul 28 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
简单的React SSR服务器渲染实现
Dec 11 Javascript
js中Array对象的常用遍历方法详解
Jan 17 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
原生JS实现音乐播放器
Jan 26 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
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
Zend的MVC机制使用分析(一)
2013/05/02 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
详解用场景去理解函数柯里化(入门篇)
2019/04/11 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
Python使用sqlite3模块内置数据库
2020/05/07 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
法国体育用品商店:GO Sport
2019/10/23 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
几个SQL的面试题
2014/03/08 面试题
农业大学毕业生的个人自我评价
2013/10/11 职场文书
英语教师自荐信
2014/05/26 职场文书
计算机实训报告总结
2014/11/05 职场文书
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python