Javascript 选项卡 - 事件类

Question

我正在使用以下 js，它非常适合在单击 5 个选项卡之一时隐藏和显示内容。效果很好，但我的问题是，我如何调整代码，以便在当前显示选项卡的内容时，该选项卡具有事件类。悬停类效果很好，除了事件类之外的其他所有内容也是如此。非常感谢任何帮助:

$(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 中，为所有 id="***tab" 元素分配一个类 class="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');
        }

    });

});