Twitter 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>
...

.display_none{
    display: none !important;
}

选项卡内容1






X
...

---

有人能帮我做js部分吗？我在引导文档中没有找到任何关于它的信息…

您可以在jquery中操纵close按钮，并在css中通过在单击按钮时隐藏选项卡来为其添加样式

在css中使用此选项隐藏选项卡

<!-- 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>
...

.display_none{
    display: none !important;
}

在jquery代码中使用此选项

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

请参阅本说明

---

编辑了jQuery。

很简单，人只需用JS删除活动类，将此代码放在下面：-

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

---

谢谢，成功了。但它产生了另一个问题：/由于选项卡内容现在是“display:none”，除非我刷新，否则它不会在悬停时再次显示。我可以撤消悬停时的“显示：无”吗？要恢复显示的按钮是什么？我的意思是，有什么按钮可以恢复你的标签吗？如果是这样，只需重复上面的代码，修改选择器并将显示更改为display:inline！重要的；这将选择页面上的所有“div”元素并删除活动类。它可能会对页面上的其他元素产生意外后果。