切换tab

使用eq()函数

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

  1. //为项目 3 设置红色背景
  2. <ul>
  3.   <li>list item 1</li>
  4.   <li>list item 2</li>
  5.   <li>list item 3</li>
  6.   <li>list item 4</li>
  7.   <li>list item 5</li>
  8. </ul>
  10. $('li').eq(2).css('background-color', 'red');

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

eg

  1. <style>
  2.         .container{
  3.             width: 400px;
  4.             margin: 40px auto
  5.         }
  6.         .title{
  7.             width: 100%;
  8.             border:1px solid black;
  9.         }
  10.         span{
  11.             width: 49%;
  12.             text-align: center;
  13.             display: inline-block;
  14.             cursor: pointer;
  15.         }
  16.         .current{
  17.             color:red
  18.         }
  19.         .content{
  20.             height: 200px;
  21.             background-color: aliceblue;
  22.         }
  23.         .content>div:nth-child(2){
  24.             display: none;
  25.         }
  26.     </style>
  27. <body>
  28.     <div class="container">
  29.         <div class="title">
  30.             <span class="current">tab1</span>
  31.             <span>tab2</span>
  32.         </div>
  33.         <div class="content">
  34.             <div>tab1内容</div>
  35.             <div>tab2内容</div>
  36.         <div>
  37.     </div>
  38. </body>
  39. <script src="http://code.jquery.com/jquery-latest.js"></script>
  40. <script>
  41.  //点击切换登录方式
  42.  $('.title').on('click','span',function () {
  43.             $(this).addClass('current');
  44.             $(this).siblings().removeClass('current');
  45.             var i =$(this).index();
  46.             $('.content>div').eq(i).show().siblings().hide();
  47.         })
  48. </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. 卸载ie

    今天卸载ie11失败,最后使用下面这个命令实现了卸载,记录下 IE11卸载命令如下: FORFILES /P %WINDIR%\servicing\Packages /M Microsoft-Wind ...

  2. echarts网络拓扑图

    option = { title: { text: '' }, tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdate: ' ...

  3. pandas功能使用rename, reindex, set_index 详解

    pandas rename 功能 在使用 pandas 的过程中经常会用到修改列名称的问题,会用到 rename 或者 reindex 等功能,每次都需要去查文档 当然经常也可以使用 df.colum ...

  4. 更改oracle归档模式路径

    1.更改归档路径 在ORACLE10G中,默认的归档路径为$ORACLE_BASE/flash_recovery_area.对于这个路径,ORACLE有一个限制,就是默认只能有2G的空间给归档日志使用 ...

  5. laravel 5.4 导出excel表格

    1.在laravel根目录下面找到一个composer.json文件 打开并在require下面加上一句话,如图所示: 注:以后这个excel的版本号可能还会修改 2.执行 composer inst ...

  6. java 中的 Comparable 和 Comparator 与 Iterable 和 Iterator

    Comparable 和 Comparator Comparable 和 Comparator 是两个关系不大的类,其分别侧重于不同的方面. 其中,接口 Comparable<T> 强行对 ...

  7. web项目访问地址前添加小图片

    修改HTML 1.head标签添加 <link rel="icon" type="image/x-icon" href="images/icon ...

  8. Python学习之旅（二十九）

    Python基础知识(28):常用第三方模块 一.Pillow PIL(Python Imaging Library):提供了强大的图像操作功能,可以通过简单的代码完成复杂的图像处理,是Python平 ...

  9. Codeforces 1090D - Similar Arrays - [思维题][构造题][2018-2019 Russia Open High School Programming Contest Problem D]

    题目链接:https://codeforces.com/contest/1090/problem/D Vasya had an array of n integers, each element of ...

  10. Python------excel读、写、拷贝

    #-----------------------读excel-----------------#1 打开方式 索引.名字#2 获取行数据 sheet.row_values(0):获取某行第n到m列(n ...