Question

我使用bootstrap标签 http://getbootstrap.com/javascript/#tabs 我创建像这样的隐藏按钮

<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操作都在同一层上

Answer 1

您可以在Javascript中添加一个列表器来隐藏标签：

$('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>

Answer 2

尝试在<script>标记中执行以下操作：

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

jsbin：http://jsbin.com/pekoduwusi/edit?html,js,output

我已经使用您正在寻找的功能更新了jsbin。它快速而肮脏，但诀窍。这个概念是你希望获得父href的{{1}}，然后找到span删除id字符的内容。然后，隐藏该内容。

jsbin：http://jsbin.com/cutiwibora/edit?html,js,output

选项卡

2 个答案: