最简单的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 相关文章推荐
类似框架的js代码
Nov 09 Javascript
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
关于vue-router的beforeEach无限循环的问题解决
Sep 09 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
浅析创建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
虫族 Zerg 历史背景
2020/03/14 星际争霸
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
JS 有名函数表达式全面解析
2010/03/19 Javascript
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
关于js类的定义
2011/06/28 Javascript
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
python简单获取数组元素个数的方法
2015/07/13 Python
PyChar学习教程之自定义文件与代码模板详解
2017/07/17 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
python实现在线翻译功能
2020/03/03 Python
Melissa香港官网:MDreams
2016/07/01 全球购物
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
金融专业应届生求职信
2013/11/02 职场文书
最常使用的求职信
2014/05/25 职场文书
《领导干部从政道德启示录》学习心得体会
2016/01/20 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android
MySQL数据库事务的四大特性
2022/04/20 MySQL