zoukankan      html  css  js  c++  java
  • jquery简易tab切换

    切换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{
                 400px;
                margin: 40px auto
            }
            .title{
                 100%;
                border:1px solid black;
            }
            span{
                 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

  • 相关阅读:
    二次识别
    IPC
    HW
    数据库异常:SQL Error: 0, SQLState: S0022
    mysql 分页查询
    [Err] 1248
    名句摘抄
    理智向左 疯狂向右
    kindle怎么导入电子书
    设置 myeclipse 编码格式
  • 原文地址:https://www.cnblogs.com/gggggggxin/p/10007783.html
Copyright © 2011-2022 走看看