Question

我使用以下js，当点击其中一个标签时，它非常适合隐藏和显示内容。工作得很好，但我的问题是，如何调整代码，以便当正在显示选项卡的内容时，选项卡有一个活动的类。悬停类运行良好，除了活动类之外的其他所有内容都可以。非常感谢任何帮助：

$(window).ready(function() {
    $('#infotab').click(function() {
        $(document).find('.tabcontent').hide();
        $('.infotabcontent').show();
        $(document).find('.top-nav2-menu li').removeClass('tabactive');
        $('#infotab').addClass('tabactive');
        $('#reviewtab').removeClass('tabactivelast');
    });
    $('#findingtab').click(function() {
        $(document).find('.tabcontent').hide();
        $('.findingtabcontent').show();
        $(document).find('.top-nav2-menu li').removeClass('tabactive');
        $('#findingtab').addClass('tabactive');
        $('#reviewtab').removeClass('tabactivelast');
        document.getElementById('frame1').contentDocument.location.reload(true);
    });
    $('#streetviewtab').click(function() {
        $(document).find('.tabcontent').hide();
        $('.streetviewtabcontent').show();
        $(document).find('.top-nav2-menu li').removeClass('tabactive');
        $('#streetviewtab').addClass('tabactive');
        $('#reviewtab').removeClass('tabactivelast');
        document.getElementById('frame2').contentDocument.location.reload(true);
    });
    $('#videotab').click(function() {
        $(document).find('.tabcontent').hide();
        $('.videotabcontent').show();
        $(document).find('.top-nav2-menu li').removeClass('tabactive');
        $('#videotab').addClass('tabactive');
        $('#reviewtab').removeClass('tabactivelast');
    });
    $('#reviewtab').click(function() {
        $(document).find('.tabcontent').hide();
        $('.reviewtabcontent').show();
        $(document).find('.top-nav2-menu li').removeClass('tabactive');
        $('#reviewtab').addClass('tabactivelast');
    });
});

Answer 1

你的代码很痛苦......

$(window).ready(function() {应为$(function() { 这是$(document).ready(function(){
在您的HTML中为您的所有class="tab"元素分配一个班级id="***tab"
缓存元素集合$('.tabcontent')和$('.top-nav2-menu li')
使用$(this)选择器

这就是您所需要的一切：

$(function(){  // DOM is now ready

    // Cache your selectors
    var $tabCont  = $(".tabcontent"),
        $topNavLi = $(".top-nav-menu li"),
        $tabRev   = $('#reviewtab');

    $('.tab').click(function() {

        var myId = this.id;

        if(myId=="findingtab"){
             $('#frame1')[0].contentDocument.location.reload(true);
        }
        if(myId=="streetviewtab"){
             $('#frame2')[0].contentDocument.location.reload(true);
        }        

        $tabCont.hide();
        $("."+ myId +"content").show();

        $(this).addClass('tabactive').siblings().removeClass('tabactive');

        $tabRev.removeClass('tabactivelast');
        if(myId=="reviewtab"){
           $(this).addClass('tabactivelast');
        }

    });

});

Answer 2

有类似的东西：

function deactivateAllTabs(){
   $('#infotab, #findingtab, #streetviewtab, #videotab, #reviewtab').removeClass('tabactive');
}

然后，在添加tabactive课程之前，您需要调用此方法：

因此，例如，而不是：

$('#infotab').addClass('tabactive');

这样做：

deactivateAllTabs();
$('#infotab').addClass('tabactive');

对所有点击处理程序重复此操作

这样，活动标签将始终具有tabactive类

Answer 3

我不知道你的DOM结构，因为你没有发布它，但我假设每个标签都有一个相同的类，“tabcontent”，来自你发布的内容。如果是这样，你可以在你的函数中做这样的事情：

$('.tabcontent').removeClass('.tabactive'); // removes class from all tabs
$('#sometab').addClass('.tabactive');       // adds class to specific tab

然后你可以使用一些CSS显示或隐藏，如下所示：

.tabcontent { display: none;  }
.tabactive  { display: block; }

恕我直言，你最好还是为所有标签使用单一功能，这样他们就可以得到同样的待遇。更易于维护。例如给你点击的每个标签栏项目以查看标签一个数据属性，其中包含你要显示的div的id，你可以扩展这样的东西（未经测试，但希望你得到要点）：

$('.tab').click(function() {
    $('.tabcontent').removeClass('.tabactive');
    $($(this).data('tabcontent')).addClass('.tabactive');
});

Javascript选项卡 - 活动类

3 个答案: