关闭所有Bootstrap选项卡，直到我将其悬停

Question

我到达页面时尝试关闭所有标签页。然后，它们应该在悬停时激活。这是我到目前为止所做的。我认为我已经很好地完成了悬停部分，但我无法在默认情况下找到如何关闭我的标签。显然删除HTML中的.active并不起作用。

<!-- TABS -->
<div class="col-xs-3 hidden-xs">
    <div class="row">
        <nav class="side-nav">
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="full-width active">
                    <a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">TAB1</a>
                </li>
                <li role="presentation" class="full-width">
                    <a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">TAB2</a>
                </li>
            </ul>
        </nav>
    </div>
</div>

<!-- TAB CONTENT -->
<div class="tab-content col-xs-9">
    <div role="tabpanel" class="tab-pane row active" id="tab1">
        <div class="col-xs-4">
            TAB CONTENT 1
        </div>
    </div>
    <div role="tabpanel" class="tab-pane row active" id="tab2">
        <div class="col-xs-4">
            TAB CONTENT 2
        </div>
    </div>
</div>

这是我的剧本

$('.nav-tabs > li > a').hover(function() {
    $(this).tab('show');
});

Answer 1

我认为你必须按照你的说法删除标签内容上的活动类。

Bootply ：http://www.bootply.com/bXCz8Y7ZOh

HTML ：

<!-- TAB CONTENT -->
<div class="tab-content col-xs-9">
    <div role="tabpanel" class="tab-pane row" id="tab1">
        <div class="col-xs-4">
            TAB CONTENT 1
        </div>
    </div>
    <div role="tabpanel" class="tab-pane row" id="tab2">
        <div class="col-xs-4">
            TAB CONTENT 2
        </div>
    </div>
</div>

使用extanded javascripts进行更新：Over和Leave Toggle ...

我认为应该有比这个更好的解决方案，但它正在运作......

<强> JS ：

$('.nav-tabs > li > a').on('mouseover', function() {
    $(this).tab('show');
});
$('.nav-tabs > li > a').on('mouseleave', function() {
    // remove active class on the tab panel
    $($(this).attr('href')).removeClass('active');
    // remove active class on the tab tab
    $(this).parent().removeClass('active');
});

Bootply ：http://www.bootply.com/vTXnT8VckW