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

这是我的玉代码。目前，第一个选项卡显示 table，我已从发布的部分中删除了大部分代码。当我点击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

编辑 - 您现有的 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');   
    });
});

Answer 2

您的 JADE 代码有一个错误 - 标记为 tabs 的块应该是 .tabs，导致输出 <tabs> 元素，因此无法被捕获你的$('.tabs .tab-links a')。你的 JS 代码没问题！

单击选项卡未更改 div

Clicking on tab not changing div

html

javascript

pug