切换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. 用google map实现周边搜索功能

    项目要实现根据经纬度获取附近的建筑,由于项目在海外运营,谷歌地图首当其冲. 首先说明的是,该功能需要在服务端实现,也就是安卓的SDK不适用. api文档地址: https://developers.g ...

  2. C#GDI+ 绘制线段（实线或虚线）、矩形、字符串、圆、椭圆

    C#GDI+ 绘制线段(实线或虚线).矩形.字符串.圆.椭圆 绘制基本线条和图形 比较简单,直接看代码. Graphics graphics = e.Graphics; //绘制实线 )) { pen ...

  3. antd-mobile Picker组件默认值

    import { createForm } from "rc-form"; @createForm() class TopAdSlots extends Component { @ ...

  4. 15.vue动画& vuex

    Vue.config.productionTip = false; ==是否显示提示信息== ==import/export== export xxx 必须跟跟对象或者和定义一起 对象: export ...

  5. upstream模块介绍

    upstream模块介绍 Nginx的负载均衡功能依赖于ngx_http_upsteam_module模块,所支持的代理方式包括proxy_pass.fastcgi_pass.memcached_pa ...

  6. 黑盒测试实践——day01

    一.任务进展情况 小组成员讨论了测试案例的选取以及测试工具的选取,目前正在设计合理的测试方法,研究待测试系统的功能需求和缺陷. 二.存在的问题 测试工具的使用还是不很清楚. 三.解决方法 通过上网搜集 ...

  7. nginx获取uri里面的参数

    add_header Content-Disposition "attachment;fileName=$arg_filename"; 请求连接为:10.26.1.165/abc? ...

  8. 【Android】快速开发偷懒必备(二) 支持DataBinding啦~爽炸，一行实现花式列表[申明：来源于网络]

    [Android]快速开发偷懒必备(二) 支持DataBinding啦~爽炸,一行实现花式列表[申明:来源于网络] 地址:http://blog.csdn.net/zxt0601/article/de ...

  9. Android启动页欢迎界面大全 （网址）

    地址:http://download.csdn.net/detail/u013424496/9539810

  10. 渗透常用dos命令，http协议及数据提交方式。 hack 某某

    dir查看目录 cd 切换目录 strat www.xxx.com   打开网页 del 删除文件 cls 清屏幕命令 ipconfig  查看ip地址 netstat -an   显示网络连接.路由 ...