无法在 Twitter Bootstrap 切换选项卡中设置默认值

Posted

技术标签:

【中文标题】无法在 Twitter Bootstrap 切换选项卡中设置默认值【英文标题】:Can't Set Default in Twitter Bootstrap Toggleable Tab 【发布时间】:2012-05-05 11:07:37 【问题描述】:

这些选项卡在单击时运行良好,但在窗口加载时选择默认选项卡失败。 javascript运行,没有错误,但没有任何反应。有什么想法吗?

<head>
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" type="text/css" />
</head>

<script>
  //<![CDATA[
    window.onload=function () 
      $('#client_tab2').tab();
      ;
  //]]>
</script>
<ul class='nav nav-tabs' id='tab'>
  <li><a href="#client_tab1" data-toggle="tab">General</a></li>
  <li><a href="#client_tab2" data-toggle="tab">Applications</a></li>
  <li><a href="#client_tab3" data-toggle="tab">Family</a></li>
  <li><a href="#client_tab4" data-toggle="tab">Memos</a></li>
</ul>

<form accept-charset="UTF-8" action="/clients/4512" class="simple_form client tab-content" id="edit_client_4512" method="post" novalidate="novalidate">
  <div class='tab-pane active' id='client_tab1'>
  <legend>General Information</legend>
  </div>

  <div class='tab-pane' id='client_tab2'>
  <legend>Application Information</legend>
  </div>

  <div class='tab-pane' id='client_tab3'>
  <legend>Family</legend>
  </div>

  <div class='tab-pane' id='client_tab4'>
  <legend>Memos</legend>
  </div>
</form>

【问题讨论】:

【参考方案1】:

你的选择器错了,试试这样吧:

$(window).load(function()
    $('#tab a[href="#client_tab2"]').tab('show');
);

演示:http://jsfiddle.net/TjjKE/

【讨论】:

非常好!我无法使用 $(window).load 但 window.onload 与您的其他提示一起使用效果很好!谢谢。【参考方案2】:

您还可以通过&lt;li class="active"&gt;&lt;a href="#whatever"&gt;....&lt;/a&gt;&lt;/li&gt; 将默认选项卡设置为活动状态,然后在相应的选项卡上设置&lt;div id="whatever" class="tab-pane active"&gt;..&lt;/div&gt;,从而无需更多 JS。看看this

【讨论】:

以上是关于无法在 Twitter Bootstrap 切换选项卡中设置默认值的主要内容,如果未能解决你的问题,请参考以下文章

无法在 Twitter Bootstrap 切换选项卡中设置默认值

在 Meteor 中获取 twitter bootstrap 单选按钮组的值

Twitter Bootstrap HTML 表单单选按钮不适用于 PHP POST

Twitter Bootstrap 按钮组控制单选按钮/复选框

页面标签上的 Twitter Bootstrap:不隐藏标签内容

Twitter Bootstrap 按钮单击以切换按钮上方的展开/折叠文本部分