最简单的tab切换实例代码


Posted in Javascript onMay 13, 2016

JS:

$(".con").eq(0).show();
  $(".btn span").click(function(){
    var num =$(".btn span").index(this);
    $(".con").hide();
    $(".con").eq(num).show().slblings().hide();
  })

CSS:

body { cursor:default; -webkit-text-size-adjust:none; font-size:12px; font-family:Arial; background:#FFF; }
.clear { zoom:1; }
.clear:after { visibility:hidden; display:block; font-size:0; content:"1"; clear:both; height:0; }
.main { width:500px; margin:20px auto; }
.btn span { width:35px; text-align:center; color:#fff; background:#f00; cursor:pointer; margin:0 5px; display:block; float:left; }
.con { display:none; border:#033 1px solid; height:100px; width:200px; }

HTML:

<div class="main">
 <div class="btn clear"><span>1</span><span>2</span><span>3</span></div>
 <div class="con">第一个<br /> </div>
 <div class="con">第二个<br /> </div>
 <div class="con">第三个<br /> </div>
</div>

截图

最简单的tab切换实例代码

以上这篇最简单的tab切换实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery用于查询操作的实现代码
May 10 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
jQuery随机密码生成的方法
Mar 09 Javascript
jquery实现标题字体变换的滑动门菜单效果
Sep 07 Javascript
Vue.js表单控件实践
Oct 27 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
如何快速上手Vuex
Feb 14 Javascript
jQuery.cookie.js使用方法及相关参数解释
Mar 06 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
vue使用v-for实现hover点击效果
Sep 29 Javascript
js实现简易点击切换显示或隐藏
Nov 29 Javascript
JS如何实现在弹出窗口中加载页面
Dec 03 Javascript
浅析创建javascript对象的方法
May 13 #Javascript
全面理解JavaScript中的闭包
May 12 #Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 #Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 #Javascript
js自定义select下拉框美化特效
May 12 #Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 #Javascript
JS函数的定义与调用方法推荐
May 12 #Javascript
You might like
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
PHP获取url的函数代码
2011/08/02 PHP
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
详解vue中在父组件点击按钮触发子组件的事件
2020/11/13 Javascript
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
numpy返回array中元素的index方法
2018/06/27 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
django settings.py 配置文件及介绍
2019/07/15 Python
python实现猜单词游戏
2020/05/22 Python
python3实现飞机大战
2020/11/29 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
电气专业应届生求职信
2013/11/01 职场文书
人事部主管岗位职责
2013/12/26 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
工商管理本科生求职信
2014/07/13 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
教师节简报
2015/07/20 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang