切换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. xdebug php 运行效率分析工具

    Xdebug是一个开放源代码的PHP程序调试器(即一个Debug工具),可以用来跟踪,调试和分析PHP程序的运行状况. 官网:https://xdebug.org/index.php 安装方法: ht ...

  2. Webpack前端打包工具

    一.安装 安装Webpack之前需要安装nodejs,然后用npm安装: $ npm install webpack -g &nsbp;运行以上命令就将Webpack安装到了全局环境中.  但 ...

  3. LeetCode - Subarray sum equals k

    Given an array of integers and an integer k, you need to find the total number of continuous subarra ...

  4. [原]Jenkins(十七) jenkins再出发之配置SVN

    创建一个demo project 配置SVN: 配置build project

  5. 谢大神给的C++和C# DES加解密代码

    // CPPdesTest.cpp : 定义控制台应用程序的入口点.// #include "stdafx.h"//#include <windows.h>//#inc ...

  6. iOS - 如何得到UIImage的大小

    把UIImage 转换为NSData,然后拿到NSData的大小 NSData * imageData = UIImageJPEGRepresentation(image,); length = [i ...

  7. git 设置tracking information

    There is no tracking information for the current branch.Please specify which branch you want to merg ...

  8. openlayers研究

    openlayers研究 待定........ 在 url encode 中 + 和 %20 都表示空格, encode(+)会变成空格 如果要传 + 这个字符需要转义 1. +  URL 中+号表示 ...

  9. yum安装openjdk

    含有的命令:yum,java -version,javac,source,vim [root@ycj ~]# yum -y install java-1.8.0-openjdk-devel //安装j ...

  10. Linux 命令 which whereis locate find

    which: 查询某指令的完整路径 $ which [-a] command -a: 将所有在PATH目录中可以找到的指令均列出. 注意:只搜索PATH下的路径. whereis: 只搜索几个特定目录 ...