最简单的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 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
webpack4.x下babel的安装、配置及使用详解
Mar 07 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
Smarty模板配置实例简析
2019/07/20 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
JS实现self的resend
2010/07/22 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
iview tabs 顶部导航栏和模块切换栏的示例代码
2019/03/04 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
用vue写一个日历
2020/11/02 Javascript
进一步了解Python中的XML 工具
2015/04/13 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
python实现爬山算法的思路详解
2019/04/09 Python
python实现大文件分割与合并
2019/07/22 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
详解python中的异常和文件读写
2021/01/03 Python
建筑专业自荐信范文
2014/01/05 职场文书
人事助理自荐信
2014/02/02 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
设备收款委托书范本
2014/10/02 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
Javascript 解构赋值详情
2021/11/17 Javascript
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL