Question

我在添加＆＃34;关闭＆＃34;时遇到问题。按钮到我的Bootstrap选项卡内容。不仅应该在悬停时打开和关闭选项卡，而且还必须添加一个按钮以允许用户单击并关闭选项卡。

<!-- SIDE NAV -->
    <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">
                        <a href="#accueil" aria-controls="accueil" role="tab" data-toggle="tab">TAB 1</a>
                    </li>
                    <li role="presentation" class="full-width">
                        <a href="#connaitre-la-ccmv" aria-controls="connaitre-la-ccmv" role="tab" data-toggle="tab">TAB 2</a>
                    </li>
               </ul>
            </nav>
        </div>
    </div>

    <!-- Tab panes -->
        <div class="tab-content col-xs-9 hidden-xs">
            <div role="tabpanel" class="tab-pane row" id="accueil">
                <div class="col-xs-4">
                    <h5 class="title-tab">TAB CONTENT 1</h5>
                    <ul class="list-tab">
                        <li>
                            <a href="">Some text</a>
                        </li>
                        <li>
                            <a href="">Some other text</a>
                        </li>
                    </ul>
                </div>
                <div class="col-xs-12">
                    <button type="button" class="close">X</button>
                </div>
            </div>
        </div>
...

有人可以帮助js部分吗？我在Bootstrap文档中找不到任何相关信息......

Answer 1

您可以在jquery中操作关闭按钮，并在单击按钮时隐藏选项卡，在css中放置一个样式。

在你的css中使用它来隐藏标签。

.display_none{
    display: none !important;
}

在jquery代码中使用它。

$('.close').click(function(){
    $('.tab-content').addClass('display_none');
});

请参阅此说明 enter link description here

编辑jQuery。

Answer 2

非常简单的人只需删除活动类，JS就把这段代码放在下面： -

$("button").click(function(){$("div").removeClass("active");});

添加＆＃34;关闭＆＃34;按钮到引导标签内容

2 个答案: