我知道这个问题已经被问过,我已经完成了之前的问题,但不知怎的,对我来说没什么用,所以我想我应该发布这个.
我想突出显示页面加载的第二个选项卡,当单击特定按钮时,我想突出显示第一个选项卡.
将类设置为第二个选项卡的“Tab Pane Active”不起作用.
<ul class="nav nav-tabs"> <li><a href="#search" data-toggle="tab">Search</a></li> <li><a href="#home" data-toggle="tab">User Details</a></li> <li><a href="#info" data-toggle="tab">More Info</a></li> </ul> <div class="tab-content" id="tabs"> <div class="tab-pane" id="search">...Content...</div> <div class="tab-pane active" id="home">...Content...</div> <div class="tab-pane" id="info">...Content...</div> </div>
解决方法
您在第二个选项卡窗格上有一个活动类,最初显示,但不显示在实际的选项卡li上.因此,您将看到第二个选项卡内容,但选项卡上没有选定状态.你需要改变:
<li><a href="#home" data-toggle="tab">User Details</a></li>
至
<li class="active"><a href="#home" data-toggle="tab">User Details</a></li>
并使用jQuery选择选项卡:
// To select the first tab $('.nav-tabs li:first-child a').tab('show'); // To select the second tab $('.nav-tabs li:eq(1) a').tab('show');
你可以在页面加载时使用它(在$(document).ready()或你正在使用的任何东西),尽管它可能最好修复标记.您可以在事件监听器中使用它来处理按钮.