點擊標籤不改變div

Question

我在JADE編碼，並試圖確保當我點擊一個標籤，它改變屏幕（或信息）。這裏是我嘗試過的所有javascript代碼。

function showDiv() { 
      document.getElementById('tab2').style.display = "block"; 
     } 



$(document).ready(function(){ 
    jQuery('.tabs .tab-links a').on('click', function(e) { 
     var currentAttrValue = jQuery(this).attr('href'); 
     if (currentAttrValue == "#tab2") 
     { 
      $('#tab2').show().siblings().hide(); 
      $('#tab2').parent('li').addClass('active').siblings().removeClass('active'); 
     } 

    }); 
}); 


jQuery(document).ready(function() { 
    jQuery('.tabs .tab-links a').on('click', function(e) { 
     var currentAttrValue = jQuery(this).attr('href'); 

     // Show/Hide Tabs 
     jQuery('.tabs ' + currentAttrValue).show().siblings().hide(); 

     // Change/remove current tab to active 
     jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); 

     e.preventDefault(); 
    }); 
}); 

這裏是我有的玉代碼。目前，第一個標籤顯示的是表格，其中的代碼大部分已從發佈的細分中刪除。當我點擊tab2時，不顯示tab2的內容。

tabs 
     ul.tab-links 
      li.active 
      a(href='#tab1') Tab #1 

      li 
      a(href='#tab2', onclick="showDiv()") Tab #2 


     .tab-content 
     #tab1.tab.active 
      div.row(ng-cloak, style="padding-top: 10px") 
      table.table.table-striped 
       thead 
       tr.text-info 
        th.th-nodecheck 
        i.icon-check-o(data-toggle="tooltip", data-placement="top", title="Pin nodes to display first", ng-click="orderTable(['-stats.block.number', 'stats.block.propagation'], false)") 
        th.th-nodename 
        i.icon-node(data-toggle="tooltip", data-placement="top", title="Node name", ng-click="orderTable(['info.name'], false)") 
        th.th-nodetype 
        i.icon-laptop(data-toggle="tooltip", data-placement="top", title="Node type", ng-click="orderTable(['info.node'], false)") 



     #tab2.tab.active 
      p Tab #2 content goes here!   
      p 
      Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel. 

幫助，將不勝感激。

Answer 1

你JADE代碼中有一個錯誤 - 標爲tabs，它應該是.tabs，引起<tabs>元件輸出的模塊，從而無法通過您的$('.tabs .tab-links a')捕獲。你的JS代碼很好！

Answer 2

希望這helps-

編輯 - 您現有的JS代碼是很好，但我認爲這可能是實現它的更好的方法。

$(document).ready(function(){ 
    jQuery('.tab-links').find('a').on('click', function(e) { 
     e.preventDefault(); 
     var currentAttrValue = jQuery(this).attr('href'), 
      nextTab = currentAttrValue == "#tab2" ? "#tab2" : "#tab1"; 
     $(nextTab).show().siblings().hide(); 
     $(this).parent('li').addClass('active').siblings().removeClass('active'); 
    }); 
});