javascript - 关闭所有 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>

<小时/>

使用扩展 JavaScript 进行更新:结束并离开切换...

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

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