隐藏jQuery UI Bootstrap选项卡

Question

有没有办法隐藏Jquery UI bootstrap标签页？我已经编写了以下代码来显示特定的标签页。

 $('#myTab a:last').tab('show')

所以我尝试使用下面的代码来隐藏选项卡，但它显示没有hide方法的错误。

 $('#myTab a:last').tab('hide')

我已经在我的html中以以下方式声明了选项卡：

 <ul class="nav nav-tabs" id="myTab">
        <li><a href="#product" data-toggle="tab">Company</a></li>
        <li><a href="#version" data-toggle="tab">Employee</a></li>
  </ul>

- DevelopmentIsMyPassion

---

你想要只隐藏最后一个选项卡吗？那就试着使用hide()和show()方法。 - Rahul R.

如何做到这一点？请解释一下。我想关闭第一个选项卡。 - DevelopmentIsMyPassion

Answer 1

你尝试过使用$('#myTab a:last').hide() 或者 $('#myTab a:first').hide()吗？

- Mandeep Jain

---

是的，可以工作。非常感谢。不知道为什么网站上的文档没有提供这个信息。 - DevelopmentIsMyPassion

因为它不是 Bootstrap 的一部分。我只是使用 jQuery 方法来隐藏和显示 DOM 元素 :) - Mandeep Jain

Answer 2

或者，你可以直接从元素中删除 active 类名：

$('.nav-tabs li.active').removeClass('active');
$('.tab-content div.active').removeClass('active');

这样，您就不会有任何仍标记为“active”的隐藏元素，这可能会干扰其他JS或CSS。

- Igor

---

我使用了 hide 函数，但当 ul 标签嵌套在 ul 标签内时，你的答案非常方便和优雅。非常感谢，因为它真的帮助了我。 - Mugiwara

Answer 3

没有必要特别隐藏选项卡，你只需要显示你想要的选项卡，其他选项卡会自动隐藏。 你可以使用：

$("a[href='#tabToBeShown']").tab("show");

- Prateek Mittal