javascript - 单击选项卡不更改 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();
    });
});

这是我的 Jade 码。目前，第一个选项卡显示了该表，我已从发布的部分中删除了该表的大部分代码。当我点击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 代码有错误 - block 标记为 tabs它应该在哪里 .tabs ，导致<tabs>要输出的元素，因此无法被您的 $('.tabs .tab-links a') 捕获。你的 JS 代码没问题!