javascript - 关闭所有“ bootstrap ”选项卡，直到将鼠标悬停在其中

到达页面时，我试图关闭所有标签。然后，应在悬停时激活它们。到目前为止，这是我所做的。我想我的悬停部分做得很好，但是我找不到默认情况下如何关闭标签页。显然，删除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');
});

最佳答案

我认为您只需要按照您的说明删除选项卡内容上的活动类即可。

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

关于javascript - 关闭所有“ bootstrap ”选项卡，直到将鼠标悬停在其中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38452421/