Question

我现在只是使用一个按钮试图让它工作。它应该在下拉框中进行另一个选择，然后显示内容页面。但是，它不会将显示更改为已创建的页面，而是必须在下拉列表中手动单击新选择。

HTML：

<ul class="nav nav-tabs" id="srTabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#search">Search</a></li>
  <li><a data-toggle="tab" href="#upload">Upload</a></li>
  <li><a data-toggle="tab" href="#notes">Notes</a></li>
  <li class="dropdown">
    <a href="#" id="subDropdown" class="dropdown-toggle" data-toggle="dropdown">Submissions <i class="fa fa-caret-down"></i></a>
    <ul class="dropdown-menu" id="submissionContainer">
      <li><a href="#grid" data-toggle="tab">Grid</a></li>
    </ul>
  </li>
  <li><a data-toggle="tab" href="#history">History</a></li>
</ul>

<div class="tab-content" id="srContent">
  <div id="home" class="tab-pane fade in active">
    <div id="navigationBar" class="text-center">
      <button onclick="makeSub(150)">Test</button>
    </div>
  </div>

  <div id="search" class="tab-pane fade"></div>

  <div id="upload" class="tab-pane fade"></div>

  <div id="notes" class="tab-pane fade"></div>

  <div id="grid" class="tab-pane fade">
    <h1 align="center">Submissions</h1>
  </div>

  <div id="history" class="tab-pane fade">
  </div>
</div>

的JavaScript

function makeSub(id) {
    $('<li><a href="#sub'+id+'" data-toggle="tab">'+id+'</a></li>').appendTo('#submissionContainer');
    $('<div id="sub'+id+'" class="tab-pane fade"></div>').appendTo('#srContent');
    $('#sub'+id).load('/webapp/submissions/' + id);
    $('#sub'+id).tab('show');   
}

Answer 1

您必须将点击事件绑定到按钮like in this fiddle I made，或将makeSub功能移到$.ready功能之外，其中按钮的onclick事件可以找到功能。

$.ready(function(){
//everything else
});

function makeSub(id) {
$('<li><a href="#sub'+id+'" data-toggle="tab">'+id+'</a></li>').appendTo('#submissionContainer');
$('<div id="sub'+id+'" class="tab-pane fade"></div>').appendTo('#srContent');
$('#sub'+id).load('/webapp/submissions/' + id);
$('#sub'+id).tab('show');   
}

在Bootstrap

1 个答案: