切换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. 数据库更新锁WITH UPDLOCK

    今天因为并发的问题,又讨论了一遍.之前以为同时两个线程开启,线程A加了更新锁,线程B没有加,线程A更新后,线程B也会继续下去代码.但是今天测试了一下,原来线程A更新后(解锁),线程B将不会继续,会出现 ...

  2. LeetCode - 768. Max Chunks To Make Sorted II

    This question is the same as "Max Chunks to Make Sorted" except the integers of the given ...

  3. 把html页面转化成图片——html2canvas

    test.html <div class="fx_zhezhao"></div> <div class="myImg"> & ...

  4. 好用的Quartz管理器类

    转发的代码,原理就不提了 下面直接上代码: QuartzManager.java 动态添加.修改和删除定时任务管理类 import org.quartz.CronScheduleBuilder; im ...

  5. 剑指offer——python【第43题】左旋转字符串

    题目描述 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果.对于一个给定的字符序列S,请你把其循环左移K位后的序列输出.例如,字符序列S=”abc ...

  6. SecureCRT操作指令

    连接服务器,文件——连接SFTP会话,然后可以help查看命令 传输文件需要明确并处在客户端和服务器端两个正确路径下, 服务器端的操作: cd——去服务器指定的路径 pwd——查看服务器端当前目录 l ...

  7. Linux上传文件与执行

    ls ——查看文件夹 mkdir——新建文件夹 cd:——进入文件 nohup python3 文件名.py & ——让代码在后台运行 ps -aux | grep 文件——查看进程 ps-a ...

  8. mysql日志分类

    mysql的日志分类: (1)错误日志:记录mysql服务的启动,运行,停止mysql服务时出现的问题 [mysqld] log_error=[/path/filename] (2)通用查询日志:记录 ...

  9. php导出超大csv导出方法，读取超大文件或者接受超大数组，防止内存溢出

    基本思路就是,知道总数之后分割成2万一个数组进行查询,最后独立写入csv,避免数据过大导致溢出 速度还不错,在php7下,机器I5 8G内存,128G,SSD,52W多条,大概也就30秒,出来整个文件 ...

  10. [No0000198]swagger api一键导入postman

    在用postman进行接口测试时,对于参数较多的接口时第一次添加接口参数是比较繁琐的,可利用swagger一键导入api接口,事例如下: 1.获取swagger地址 2.打开postman,点击imp ...