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{
            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

posted @ 2018-11-23 15:15  gggggggxin  阅读(283)  评论(0)  编辑  收藏  举报