首页 > 【解决了】jq tab切换问题?

【解决了】jq tab切换问题?

  $(".test li").click(function() {
        var _index = $(this).index();
        $('.test li' + ":eq(" + _index + ")").addClass('on')
    });

//我想点击01 所有01都需要加上on
//代码需要如何修改 谢谢

//解决方案

$('.test .bd .item:first-child').show();
$(".test li").click(function() {
    var _index = $(this).index() + 1;
    var textLi = '.test li';
    $('.test li' + ":nth-child(" + _index + ")").addClass('on').siblings().removeClass('on');

     $('.test .bd .item' + ":nth-child(" + _index + ")").show().siblings().hide();
});

给个简单的实现:

$(".test ul").on('click', 'li', function(){
        var _index = $(this).index();
        $(".test ul").find("li:eq(" + _index + ")").addClass('on').siblings().removeClass('on');
    })

换个思路

<ul class="test">
    <li class="one">
    ...
    ...
</ul>
<ul class="test">
    <li class="one">
    ...
    ...
</ul>
<ul class="test">
    <li class="one">
    ...
    ...
</ul>
$(".test li").click(function() {
        var className = $(this).attr('class');
        $("." + className).addClass('on');
});

tab组件。你可以参考一下 http://www.zhangweiwei.cn/demo/tools/tab/index.html 要搞懂原理就很简单了

【热门文章】
【热门文章】