twitter-bootstrap Twitter Bootstrap Modal w/tabs 默认为第一个选项卡

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13749883/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 15:51:40  来源:igfitidea点击:

Twitter Bootstrap Modal w/tabs default to first tab

javascriptjqueryhtmltwitter-bootstrap

提问by SuperNinja

Using Bootstrap modal that contains tabs. The modal is called from a php generated table of gallery names.

使用包含选项卡的 Bootstrap 模式。该模式是从 php 生成的画廊名称表中调用的。

Table Data

表格数据

<td>
<a href="#" class="galName" data-target="#myModal" data-toggle="modal" id="update_<?php echo $gal['id']; ?>" >
<?php echo $gal['name']; ?>
</a>
</td>

The modal opens and the first tab is selected on initial fire. If I navigate to another tab close the modal and select a different gallery the modal opens to the last tab that was open.

模态打开并在初始触发时选择第一个选项卡。如果我导航到另一个选项卡关闭模态并选择不同的图库,模态将打开到最后一个打开的选项卡。

How do I make sure that when the modal is opened, it always opens to the first tab?

如何确保打开模态时,它始终打开到第一个选项卡?

Modal Tabs

模态标签

<ul id="myTab" class="nav nav-tabs">
  <li class="active">
       <a href="#home" data-toggle="tab">Home</a>
  </li>
  <li class="">
       <a id="uploadRevision" href="#upload" data-toggle="tab">Upload Revision</a>
  </li>
  <li class="">
       <a href="#editRev" data-toggle="tab">Edit Revision</a>
   </li>
 </ul>

.galName fires an initUpdate function in effort to set first tab as default. It sets the tab but tab content is not show.

.galName 触发 initUpdate 函数以将第一个选项卡设置为默认值。它设置选项卡但不显示选项卡内容。

function initUpdate()
{ 
  $('#myModal a:first').tab('show');
}

Thanks for the help.

谢谢您的帮助。

回答by SuperNinja

Found the solution. Must remove the class="active" from both tab and tabContent. Thanks to @merv - https://stackoverflow.com/a/11762931/1214858

找到了解决办法。必须从 tab 和 tabContent 中删除 class="active"。感谢@merv - https://stackoverflow.com/a/11762931/1214858

回答by gratify

Simple; use class "active" to show particular tab on load.

简单的; 使用“active”类在加载时显示特定选项卡。

Like below:

像下面这样:

<!-- Nav tabs -->
<!-- content tabs -->                             

Remove class="tab-pane active" in li of above on nav of tab and content which you want to make it in active.

删除上面的 li 中的 class="tab-pane active" 在要使其处于活动状态的选项卡和内容的导航中。