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的一个浮动框(扩展性比较好 )
Aug 27 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
两个数组去重的JS代码
Dec 04 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
Javascript实现运算符重载详解
Apr 07 Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 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
Windows下的PHP5.0详解
2006/11/18 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
YII框架行为behaviors用法示例
2019/04/26 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
浅谈Javascript数据属性与访问器属性
2016/07/26 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
2021/01/18 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
教育学习自我评价
2014/02/03 职场文书
大学生入党推荐书范文
2014/05/17 职场文书
施工安全责任书范本
2014/07/24 职场文书
社区领导班子四风问题原因分析及整改措施
2014/09/28 职场文书
先进教师个人总结
2015/02/11 职场文书
企业党员岗位承诺书
2015/04/27 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
深入浅析React中diff算法
2021/05/19 Javascript
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android