切换tab

使用eq()函数

eq() 方法将匹配元素集缩减值指定 index 上的一个。

//为项目 3 设置红色背景

<ul>

  <li>list item 1</li>

  <li>list item 2</li>

  <li>list item 3</li>

  <li>list item 4</li>

  <li>list item 5</li>

</ul>

$('li').eq(2).css('background-color', 'red');

eq(index)中index可为正数，负数（倒序），超过已有length（不显示）

eg

<style>

        .container{

            width: 400px;

            margin: 40px auto

        }

        .title{

            width: 100%;

            border:1px solid black;

        }

        span{

            width: 49%;

            text-align: center;

            display: inline-block;

            cursor: pointer;

        }

        .current{

            color:red

        }

        .content{

            height: 200px;

            background-color: aliceblue;

        }

        .content>div:nth-child(2){

            display: none;

        }

    </style>

<body>

    <div class="container">

        <div class="title">

            <span class="current">tab1</span>

            <span>tab2</span>

        </div>

        <div class="content">

            <div>tab1内容</div>

            <div>tab2内容</div>

        <div>

    </div>

</body>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

 //点击切换登录方式

 $('.title').on('click','span',function () {

            $(this).addClass('current');

            $(this).siblings().removeClass('current');

            var i =$(this).index();

            $('.content>div').eq(i).show().siblings().hide();

        })

</script>

效果如下

tab1

tab2

jquery简易tab切换的更多相关文章

  1. jquery实现tab切换完整代码

    代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. JQuery实现tab切换

    JQuery实现tab切换: (jquery需要自己添加) <!DOCTYPE html> <html lang="en"> <head> &l ...

  3. jquery中简易tab切换

    <!doctype html> <html> <head> <title>test</title> <meta content=&qu ...

  4. jquery 实现tab切换

    大家都知道 使用QQ的时候需要输入账号和密码 这个时候一个TAB键盘就可以实现切换到下一个输入框里 具体是怎么实现的呢 请看代码 <!DOCTYPE html> <html lang ...

  5. jQuery带tab切换搜索框样式代码

    效果体验:http://hovertree.com/texiao/jquery/23/ 代码如下,保存到HTML文件也可以查看效果: <!DOCTYPE html> <html la ...

  6. 简单的jquery实现tab切换

    $(document).ready(function(){ $(".nav-menu-ctn").find("a").click(function(){ $(t ...

  7. jquery版tab切换效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. 通过jquery实现tab切换

    //css代码 *{ margin: 0; padding: 0; } #box{ margin: 0 auto; width: 800px; border: 5px solid #000000; o ...

  9. jquery写tab切换,三行代码搞定

    <script type="text/javascript"> $("button").on("click",function( ...

随机推荐

  1. [干货教程]仿网易云课堂微信小程序开发实战经验

    本篇文章想跟大家分享下:我们公司“湖北诚万兴科技”最近刚帮客户定制开发.目前已上线的“哎咆课堂”微信小程序的开发经验分享.首先大概介绍下这个小程序所涉及到的主要技术点:微信登录.微信支付.微信小程序F ...

  2. K8s(2)-部署应用

    一旦运行了Kubernetes集群,就可以在其上部署容器化应用程序.为此,您需要创建Kubernetes Deployment配置.Deployment指示Kubernetes如何创建和更新应用程序的 ...

  3. C++将时间格式转换成秒数

    #include <stdio.h> #include <time.h> #include <string.h> #include <stdlib.h> ...

  4. Android application 和 activity 标签详解

    extends:http://blog.csdn.net/self_study/article/details/54020909 Application 标签 android:allowTaskRep ...

  5. Linux下的awk文本分析命令实例(二)

    awk实现求和.平均.最大值和最小值的计算操作 准备和数据文件 [finance@master2-dev ~]$ cat data.txt 求和 [finance@master2-dev ~]$ ca ...

  6. java后端实习，从最简单的crud做起

    现在就是做ssm框架下的sql语句,主要是select语句,sql语句没什么难的,孰能生巧,趁此机会,把自己的sql基础打扎实,也是一种实习的经验. 1.在子查询中字段的类型不相容怎么办? cast函 ...

  7. sql语句的存储过程中的条件处理

    SQL语句的crud操作很多可能是相似的,或者重复的,这时可以将其总结我一个存储过程,即函数,这样就可以实现代码复用,也就是函数. 这时候的控制语句就像编程语言c,java的一样,其中有很多关键词CA ...

  8. 11.14 luffycity项目(6)

    2018-11-14 21:26:45 实现了购物车功能! 涉及到了redis的使用  需要在pycharm中下载   django_redis 其他的看一下笔记,有购物车里面数据存储的结构才发现数据 ...

  9. ZooKeeper注册中心安装详细步骤（单节点）

    安装 Dubbo 注册中心 Dubbo 建议使用 Zookeeper 作为服务的注册中心. 注册中心服务器(192.168.3.71)配置,安装 Zookeeper: 1. 修改操作系统的/etc/h ...

  10. Jquery 获取 radio选中值，select选中值

    随着Jquery的作用越来越大,使用的朋友也越来越多.在Web中,由于CheckBox.Radiobutton .DropDownList等控件使用的频率比较高,就关系到这些控件在Jquery中的操作 ...