点击标签不改变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'); 
    }); 
});