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

希望这有帮助 -

编辑 - 您现有的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>元素，因此您的{ {1}}。你的JS代码很好！

单击选项卡不更改div

2 个答案: