Question

我正在制作一个包含引导标签的小页面，以便在聊天窗口之间切换。我认为我已经正确地遵循了这个例子，但这不会起作用：

<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

Answer 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/

Bootstrap选项卡不会切换

1 个答案: