Question

我正在尝试在选择选项卡时生成js表。每个选项卡将生成一个不同的表。该表永远不会显示。我不依赖于引导程序选项卡，因此，如果引导程序选项卡之外还有其他解决方案，那我就很好了。

<ul class="nav nav-tabs">
 <li class="active"><a data-toggle="tab" href="#menu1">Menu 1</a></li>
 <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
 <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
 <div id="menu1" class="tab-pane fade in active">
  <script type="text/javascript">table1()</script>
 </div>
 <div id="menu2" class="tab-pane fade">
  <script type="text/javascript">table2()</script>
 </div>
 <div id="menu3" class="tab-pane fade">
  <script type="text/javascript">table3()</script>
 </div>
</div>

Answer 1

对于这样的事情，您可以使用一些jquery并滚动您自己的代码。试试这个。

v1   v2
a    NA
b    b
c    c

在这里，您只需单击菜单项，它将显示相应的内容。您还可以在此处使用$('.nav-tabs li').on('click', function() { $('.tab-pane').hide().eq($(this).index()).show(); });来选择要触发的功能，具体取决于您单击的菜单项。希望能给您正确的方向。

http://jsfiddle.net/fzc3opv2/

if/else

$('.nav-tabs li').on('click', function() {
  var index = $(this).index();
  $('.tab-pane').hide().eq(index).show();
  
  if (index === 0) {
    //table1();
    console.log('Run function 1.');
  } else if (index === 1) {
    //table2();
    console.log('Run function 2.');
  } else {
    //table3();
    console.log('Run function 3.');
  }
});

.nav-tabs {
  background: #ccc;
  width: 100%;
}

.tab-content {
  background: #4c4c4c;
  min-height: 100px;
  width: 100%;
}

.tab-pane {
  width: 100%;
  height: 100px;
}

.hide {
  display: none;
}

从引导标签生成JavaScript表

1 个答案: