Нажатие на вкладку не меняет 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-

Edit- Ваш существующий 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'); 
    }); 
});