引导选项卡不切换

Posted 2023-05-08

【中文标题】引导选项卡不切换

【英文标题】：Bootstrap tab doesn't switch

【发布时间】：2018-09-03 15:07:09

【问题描述】：

我正在制作一个包含引导选项卡的小页面，用于在聊天窗口之间切换。 我想我已经正确地遵循了这个例子，但这不起作用：

<div class="container">
    <ul class="nav nav-tabs" id="navbartabs">
        <li class="active"><a data-toggle="tab" href="#placeholder">Placeholder</a></li>
        <li><a data-toggle="tab" href="#chat-patient+email.com">Patient, Peter</a></li>
    </ul>
    <div class="tab-content" id="tabcontent">
        <div id="placeholder" class="tab-pane active">
            Placeholder
        </div>
        <div id="chat-patient+email.com" class="tab-pane">
            <ul id="content-patient+email.com"></ul>
            <input id="input-patient+email.com"><button id="send-patient+email.com">Send</button>
        </div>
    </div>
</div>

我可以使用导航选项卡按钮，它们确实获得了视觉效果，因为选项卡内容不会在 active 类周围切换。

如果我在网页上编辑源代码，我可以通过添加 active 类并将其从占位符选项卡中删除来显示第二个选项卡。

JSFiddle

【参考方案1】：

使用包含“.”的id或“+”会导致 jQuery 选择器出现问题。您需要像这样转义选项卡选择器...

data-target="#chat-patient\+email\.com"

<ul class="nav nav-tabs" id="navbartabs">
    <li class="active"><a data-toggle="tab" href="#placeholder">Placeholder</a></li>
    <li><a data-toggle="tab" href data-target="#chat-patient\+email\.com">Patient, Peter</a></li>
</ul>

https://jsfiddle.net/5aqtqLv0/

或者，只需删除 + 和 .来自id。

    <ul class="nav nav-tabs" id="navbartabs">
        <li class="active"><a data-toggle="tab" href="#placeholder">Placeholder</a></li>
        <li><a data-toggle="tab" href="#chat-patient">Patient, Peter</a></li>
    </ul>

https://jsfiddle.net/yun3Lzsk/

【讨论】：

不客气，如果您必须在 id 中保留特殊字符，我添加了另一个选项。