我在bootstrap modal bootstrap选项卡中使用选项卡从数据库中获取数据 当我使用onclick =" javascript:$(' #myModal')。modal(' show');" here()我从数据库获取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>
答案 0 :(得分:0)
从模式中删除tabindex="-1"
。然后它将起作用。
答案 1 :(得分:0)
在bootstrap 4.5中,需要为ul添加css类“ nav nav-tabs”:
<ul class="nav nav-tabs">
<li>.........
</ul>