没有 ID 的引导导航选项卡答案

【问题标题】：Bootstrap nav-tabs without IDs没有 ID 的引导导航选项卡
【发布时间】：2016-08-07 02:49:14
【问题描述】：

我想制作一个在不同选项卡上显示信息的插件。

它必须在一页上处理多个实例，所以我不能（也不想）使用 ID

仍然可以使用标签吗？例如通过数据属性？据我所知，他们只处理以id为目标的div

谢谢

编辑：我注意到它确实适用于类。但同样：如果我有多个实例，我如何区分要显示的“正确”选项卡？

编辑：代码

    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab">Home</a></li>
        <li><a data-toggle="tab">Other</a></li>
    </ul>


    <div class="tab-content">

        <div <!-- how to reference this? --> </div>
        <div <!-- how to reference this? --> </div>

    </div>

如果我 show()a 选项卡，它会打开带有相应 id 的 div，对吗？但是没有id怎么办？

【问题讨论】：

当你说“它必须在一页上处理多个实例”时，我对你的意思感到困惑。这是否意味着多个选项卡或多组选项卡？无论哪种情况，我都不明白为什么 ID 不起作用，因为每个 ID 始终是唯一的。
如果您只想使用类而不是 ID 来执行此操作，那么这应该可以工作 - jsfiddle.net/DTcHh/19435。
自动生成的多组选项卡（这就是为什么我不能使用 id 并且仅定位类将在整个页面中选择所有这些选项卡的原因）
@devman 我遇到了和你一样的问题。你有没有找到一个优雅的解决方案？

标签： twitter-bootstrap tabs

【解决方案1】：

data-target 属性可以得到一个 css 选择器。（例如data=target=".somewhere .tab1"）

但这并不能消除给出一些上下文感的需要。如果您只是说：切换.class1，那么它将切换所有具有class="class1" 的元素。因此，您需要以某种方式使其具有独特性。

【讨论】：