Javascript选项卡-活动类

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

$(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');
    });
});

比如：

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

然后，在添加

tabactive

类之前，请调用此方法：

因此，例如，不是：

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

这样做：

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

对所有单击手柄重复此操作

---

这样，活动选项卡将始终有一个

tabactive

class

我不知道您的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; }

我想你最好对你所有的标签使用一个单一的功能，这样他们就可以得到同样的待遇。易于维护。e、 g.为您单击以查看选项卡的每个选项卡栏项指定一个数据属性，该属性带有您要显示的div的id，您可以展开类似的内容（未测试，但希望您能了解要点）：

---

你的代码很痛苦

• $（窗口）.ready（函数（）{

  应该是

  $（函数（）{

  这是

  $（document）.ready（function（）{

• 在HTML中，为所有

  id=“***tab”

  元素分配一个类

• 缓存元素集合

  $（'.tabcontent'）

  和

  $（'.top-nav2-menu-li'）

• 使用

  $（此）

  选择器

这就是您所需要的一切：

$(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');
        }

    });

});

代码已经在添加一个“tabactive”类…

$（window）.ready（function（）{

那是什么？

$(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');
        }

    });

});