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的簡寫指定一個類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'); 

repeate這針對所有點擊handlerss

這樣，活動選項卡將永遠有一個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'); 
});