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 相关文章推荐
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 Javascript
javascript正则匹配汉字、数字、字母、下划线
Apr 10 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
javascript函数特点实例分析
May 14 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
localStorage实现便签小程序
Nov 28 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 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发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
php实现留言板功能
2017/03/05 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[48:31]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第一场 2月2日
2021/03/11 DOTA
Python模块学习 re 正则表达式
2011/05/19 Python
python中的对象拷贝示例 python引用传递
2014/01/23 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
tensorflow1.0学习之模型的保存与恢复(Saver)
2018/04/23 Python
python实现微信小程序自动回复
2018/09/10 Python
Python安装selenium包详细过程
2019/07/23 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
充分就业社区汇报材料
2014/05/07 职场文书
婚内房产协议书范本
2014/10/02 职场文书
扬州个园导游词
2015/02/06 职场文书
个人工作能力自我评价
2015/03/05 职场文书