使用 javascript 以编程方式切换选项卡答案

【问题标题】：switch tabs programmatically using javascript使用 javascript 以编程方式切换选项卡
【发布时间】：2016-04-07 20:03:03
【问题描述】：

我有一个 html 选项卡式界面，我想使用一个函数根据在组合框中选择的项目在不同的选项卡之间切换。我尝试了与之前关于 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>

我尝试了许多选项，包括评论的选项，但没有一个有效。请指教。

【问题讨论】：

$("#container").tab 似乎正在使用插件或 jQuery UI。是否包括在内？也不应该是.tabs() 而不是.tab()
另外，请链接您用来查找“与之前相关问题不同的解决方案”的问题，以便我们知道哪些问题不适合您。
@mplungjan 我只有容器类的 css。我需要发布吗？这是一个比较大的css文件。
@AlexeiLevenkov 这里是我之前使用的相关问题的链接stackoverflow.com/questions/15304027/…stackoverflow.com/questions/13722893/…

标签： javascript jquery html tabs

【解决方案1】：

你可以这样使用

jQuery 代码

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

【讨论】：