Javascript 引导隐藏选项卡中的选项卡按钮

我使用引导标签 我创建了这样的隐藏按钮

<li role="presentation"><a href="#tab_content_6" id="tab_6" aria-controls="tab_content_6" role="tab" data-toggle="tab"> Options &nbsp;&nbsp; <span onclick="$('#tab_6').hide();"  class="tab_hide_btn">X</span></a></li>

---

如果我单击隐藏范围，选项卡将同时打开和隐藏，因为两个onclick操作都位于同一层

请尝试在

标记中执行类似操作：

$('span').on('click', function(e) {
  $(this).parents('li').hide();
});

jsbin：

我已经用您想要的功能更新了jsbin。它又快又脏，但确实奏效。概念是您希望获取父级

span

的

href

，然后查找带有

id

的内容，去掉

#

字符。然后，隐藏该内容

---

jsbin:

您可以在Javascript中添加一个listner以隐藏选项卡：

$('li a[role="tab"] span').on('click', function(e) {
   e.preventDefault();
   e.stopPropagation();
   $(this).parents('li').hide();
});

此外，Bootstrap提供了一个助手类来显示关闭按钮，因此您的html可以是：

<li role="presentation">
    <a href="#tab_content_6" id="tab_6" aria-controls="tab_content_6" role="tab" data-toggle="tab">
        Options &nbsp;
        <button type="button" class="close" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button> 
    </a>
</li>

那么你到底想做什么？这不起作用。如果我有一个打开的主页选项卡，并单击tab关闭另一个选项卡，则不建议将内容更改为隐藏选项卡，盲目地针对页面上的所有

span

s，即使对于示例答案也是如此。