[英]Bootstrap tabs not working inside modal
當我使用 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="-1"
。 然后它會起作用。
在 bootstrap 4.5 中,css 類“nav nav-tabs”需要像這樣為 ul 添加:
<ul class="nav nav-tabs">
<li>.........
</ul>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.