引导选项卡在模态中不起作用答案

【问题标题】：Bootstrap tabs not working inside modal引导选项卡在模态中不起作用
【发布时间】：2017-09-24 14:46:46
【问题描述】：

我在引导模式中使用选项卡引导选项卡从数据库中获取数据当我使用 onclick="javascript:$('#myModal').modal('show');"在这里（）我从数据库中获取 id 并根据该 id 显示内容，但我面临的问题是第一个模型与选项卡工作正常，但是当打开第二个模型时，它们的选项卡没有切换。示例代码如下...

<button class="btn btn-default" onclick="javascript:$('#myModal<?php echo $cid;?>').modal('show');">Click     Me</button>

<div id="myModal<?php echo $cid;?>" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home"     role="tab"
                                                              data-toggle="tab">Home</a></li>
                    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab"
                                               data-toggle="tab">Profile</a></li>
                    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab"
                                               data-toggle="tab">Messages</a></li>
                    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab"
                                               data-toggle="tab">Settings</a></li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home">Home</div>
                    <div role="tabpanel" class="tab-pane" id="profile">Profile</div>
                    <div role="tabpanel" class="tab-pane" id="messages">Messages</div>
                    <div role="tabpanel" class="tab-pane" id="settings">Settings</div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

您的模态框或其任何父元素是否具有tabindex 属性？
不，我没有使用 tabindex 属性
我已经测试了你的代码，我没有发现任何问题试试这个jsfiddle.net/3svdffyo
@ConstantinUncuță 问题是它在未与数据库连接时工作正常，但看看我的代码我得到了 #myModal() 和数据库中的 id，所以当我从数据库中获取 id 并将其更改为这个问题....

标签： javascript jquery twitter-bootstrap

【解决方案1】：

从模态中删除tabindex="-1"。然后就可以了。

【讨论】：

【解决方案2】：

在 bootstrap 4.5 中，css 类“nav nav-tabs”需要为 ul 添加，如下所示：

<ul class="nav nav-tabs">
<li>.........
</ul>

【讨论】：