javascript - 从引导选项卡生成 javascript 表

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>

标签： javascripthtml

Answer 1

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

$('.nav-tabs li').on('click', function() {
    $('.tab-pane').hide().eq($(this).index()).show();
});

在这里，您只需单击菜单项，它将显示相应的内容。您还可以使用if/else此处来选择要触发的功能，具体取决于您单击的菜单项。希望这可以让您朝着正确的方向前进。

http://jsfiddle.net/fzc3opv2/

$('.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">
   <p>Menu 1</p>
 </div>
 <div id="menu2" class="tab-pane fade hide">
   <p>Menu 2</p>
 </div>
 <div id="menu3" class="tab-pane fade hide">
   <p>Menu 3</p>
 </div>
</div>