点击标签不改变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代码有一个错误--一个被标记为 "块 "的块。tabs 应有尽有 .tabs导致 <tabs> 元素输出，从而使您的 $('.tabs .tab-links a'). 你的JS代码很好!

Answer 2

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');   
    });
});