Question

我有一个html选项卡式界面，我想根据使用功能在Combobox中选择的项目在不同选项卡之间切换。我在stackoverflow上尝试了以前相关问题的不同解决方案，但它们都不适用于我。有人可以帮我解决我失踪的地方。

//code for tabs
<div class="container">
   <ul class="nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="#home">Bio Data</a></li>
      <li><a data-toggle="tab" href="#menu1">Insurance Details</a></li>
      <li><a data-toggle="tab" href="#menu2">Credit Card Details</a></li>
      <li><a data-toggle="tab" href="#menu3">RTA</a></li>
   </ul>
   <div class="tab-content">
     <div id="home" class="tab-pane fade in active">
       <input name="surname" id="surname" type="text"  /><br />
       <input name="otherName" id="otherName" type="text" /><br />
     </div>
     <div id="menu1" class="tab-pane fade">
       <label for="scheme">Scheme Name:</label>
       <input name="scheme" id="scheme" type="text"  /><br />
       <label for="scheme_id">Scheme ID:</label>
       <input name="scheme_id" id="scheme_id" type="text" /><br />
     </div>
   </div>
</div>


 //script for switching tabs
     <script type="text/javascript" >
        function selectTab() {
          $("#container").tab("option", "active", 2);
          //$('#container a[href="#menu1"]')[2].click();
          //$("#menu1").click();
        }          
     </script>

我尝试了很多选项，包括评论的选项，但都没有。请指教。

Answer 1

你可以像这样使用

js code

$('.cont').click(function(){

  var nextId = $(this).parents('.tab-pane').next().attr("id");
  $('[href=#'+nextId+']').tab('show');

})

html代码

<div class="container-fluid">
  <ul class="nav nav-tabs" id="myTabs">
    <li class="active"><a href="#home" data-url="/embed/62805/view">Home</a></li>
    <li><a href="#profile" data-url="/embed/62806/view">Profile</a></li>
    <li><a href="#messages" data-url="/embed/62807/view">Messages</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="home">This is the home pane...</div>
    <div class="tab-pane" id="profile"></div>
    <div class="tab-pane" id="messages"></div>
  </div>
</div>

使用javascript以编程方式切换标签

1 个答案: