最简单的tab切换实例代码

 更新时间:2016年05月13日 08:53:17   投稿:jingxian  
下面小编就为大家带来一篇最简单的tab切换实例代码。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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切换实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Javascript类定义语法,私有成员、受保护成员、静态成员等介绍

    Javascript类定义语法,私有成员、受保护成员、静态成员等介绍

    JS只是一门支持面向对象编程的语言,通过OO可以让我们的代码组织更加人性化。可是与传统基与类的面向对编程语言不同它没有类概念并且没成员访问修饰符。这多少会给我们编程工作会带来一些束缚
    2011-12-12
  • 简单分析js中的this的原理

    简单分析js中的this的原理

    这篇文章主要介绍了简单分析js中的this的原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • 前端显示json格式化示例代码

    前端显示json格式化示例代码

    项目开发过程中遇到JSON字符串回显的情况,直接显示的话效果很丑,不方便查看,因此需要在前端页面对JSON进行格式化显示,下面这篇文章主要给大家介绍了关于前端显示json格式化的相关资料,需要的朋友可以参考下
    2024-03-03
  • js中apply和call的理解与使用方法

    js中apply和call的理解与使用方法

    这篇文章主要给大家介绍了关于js中apply和call的理解与使用方法,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-11-11
  • JavaScript如何实现组合列表框中元素移动效果

    JavaScript如何实现组合列表框中元素移动效果

    在页面中有两个列表框,需要把其中一个列表框的元素移动到另一个列表框,怎么实现此功能呢,下面通过本文给大家介绍JavaScript如何实现组合列表框中元素移动效果,感兴趣的朋友一起学习吧
    2016-03-03
  • Bootstrap导航条鼠标悬停下拉菜单

    Bootstrap导航条鼠标悬停下拉菜单

    这篇文章主要为大家详细介绍了Bootstrap导航条鼠标悬停下拉菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • Postman内建变量常用方法实例解析

    Postman内建变量常用方法实例解析

    这篇文章主要介绍了Postman内建变量常用方法实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • 微信小程序自定义弹出层效果

    微信小程序自定义弹出层效果

    这篇文章主要为大家详细介绍了微信小程序自定义弹出层效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05
  • JS更改select内option属性的方法

    JS更改select内option属性的方法

    这篇文章主要介绍了JS更改select内option属性的方法,涉及JavaScript动态操作页面select元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • 屏蔽Flash右键信息的js代码

    屏蔽Flash右键信息的js代码

    网上好多屏蔽flash右键的方法,可多数是过期的或不合适的,现记录下用JS方法屏蔽flash右键相关版权信息。
    2010-01-01

最新评论