Question

我正在开发一个项目，我希望在窗口加载时显示第二个活动标签，但它始终激活第一个标签。

这是我的剧本：

<script>
   $(document).ready(function() {
    $('#tabs div').hide();
    $('#tabs div:first').show();
    $('#tabs ul li:first').addClass('active');
    $('#tabs ul li a').click(function() {
        $('#tabs ul li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        $('#tabs div').hide();
        $(currentTab).show();
        return false;
    });
});
</script>

问题是，当我第二次代替第一名时，它不起作用。

Answer 1

您可以触发特定show元素的事件，而不是在点击处理程序外使用hide和a并重复逻辑：

var $a = $('#tabs ul li a').click(function() {
    $('#tabs ul li').removeClass('active');
    $(this).parent().addClass('active');
    var currentTab = $(this).attr('href');
    $('#tabs div').hide();
    $(currentTab).show();
    return false;
});

$a.eq(1).click();

Answer 2

使用JQuery eq方法，如下所示：

$(document).ready(function(){
    $('#tabs div').hide();
    $('#tabs div').eq(1).show();
    $('#tabs ul li').eq(1).addClass('active');
});

如何使用JavaScript激活第二个选项卡而不是第一个选项卡？

2 个答案: