在页面加载时选择默认选项卡答案

【问题标题】：Select default tab on page load在页面加载时选择默认选项卡
【发布时间】：2019-06-27 15:11:17
【问题描述】：

我希望在页面加载时“选择”第一个选项卡。

您好，我希望在页面加载时选择第一个选项卡“发现”。我在 Javascript 中运行了相同代码功能的多个版本，但似乎没有任何效果。我想知道我的 Javascript 或 HTML 代码格式是否正确。

我以此为参考：https://codepen.io/PeteTalksWeb/pen/vmyJBd

非常感谢您对此主题的任何反馈或帮助，在此先感谢。

<div id="tabs" class="tabbable-line">
 <ul class="nav nav-tabs text-center">
  <li class="active">
   <a href="#tabs-1" data-toggle="tab">Discover</a>
  </li>
  <li>
   <a href="#tabs-2" data-toggle="tab">Planning</a>
  </li>
  <li>
   <a href="#tabs-3" data-toggle="tab">Marketing</a>
  </li>
  <li>
   <a href="#tabs-4" data-toggle="tab">Growth</a>
  </li>
 </ul>
<div class="tab-content">
<div class="tab-pane active" id="tabs-1">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-1.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

<div class="tab-pane" id="tabs-2">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-2.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

<div class="tab-pane" id="tabs-3">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-3.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

<div class="tab-pane" id="tabs-4">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-4.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

</div>
</div>
<div id="tabid"></div>

<script>
 $("#tabs").tabs({
 active: 0,
 activate: function (event, ui) {
 var active = $('#tabs').tabs('option', 'active');
 }
 });
</script>

我希望在页面加载时选择标签/链接，但输出却是标签“闪烁”，好像被选中并在不久后消失。

编辑我收到了这个错误：未捕获的类型错误：$(...).tabs 不是函数这是什么意思？

【问题讨论】：

您检查控制台是否有错误？你包括 jQuery 和 jQuery UI 吗？您是在页面末尾还是在 document.ready 处理程序中运行 JS？
嗨@j08691，感谢您的检查 - 我一开始没有包含 jQuery 和 jQuery UI，虽然我现在已经添加了它，但似乎不起作用。我在 HTML 页面的末尾运行我的 JS。这是正确的运行方式吗？

标签： javascript jquery html css jquery-ui-tabs

【解决方案1】：

下面的代码 sn-p 表明它工作正常。请检查以下内容：

您的 javascript 包含一个 document.ready 函数：Either

$(function(){

或

$(document).ready(function(){

（两者的工作方式相同 - 请参阅下面的 StackSnippet 了解第一个的使用方式）

您已经包含了所有必要的库（CSS、jQuery.js 和 jQueryUI.js 文件）——如下面的 sn-p。您可以将它们包含在页面的 <head> 标记中。

$(function(){
  $("#tabs").tabs({
    active: 0,
    activate: function (event, ui) {
      var active = $('#tabs').tabs('option', 'active');
    }
  });
}); //end document.ready

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" >
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="tabs" class="tabbable-line">
 <ul class="nav nav-tabs text-center">
  <li class="active">
   <a href="#tabs-1" data-toggle="tab">Discover</a>
  </li>
  <li>
   <a href="#tabs-2" data-toggle="tab">Planning</a>
  </li>
  <li>
   <a href="#tabs-3" data-toggle="tab">Marketing</a>
  </li>
  <li>
   <a href="#tabs-4" data-toggle="tab">Growth</a>
  </li>
 </ul>
<div class="tab-content">
<div class="tab-pane active" id="tabs-1">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-1.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

<div class="tab-pane" id="tabs-2">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-2.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

<div class="tab-pane" id="tabs-3">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-3.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

<div class="tab-pane" id="tabs-4">
<div class="col-md-6 margin-btm-30">
 <img src="img/process-4.jpg" class="img-responsive img-shadow" alt="">
</div>
<div class="col-md-6">
 <h4>Integration of business</h4>
 <p>Some text</p>
</div>
</div>

</div>
</div>
<div id="tabid"></div>
<script>
</script>

【讨论】：

嗨@cssyphus，谢谢你的建议。我已按照您的建议添加了编辑代码，但不知何故，代码仍未运行。我将检查控制台是否有错误。再次感谢！

【解决方案2】：

我已获取您的代码并用它创建了一个 JSFiddle here。

{版主注意 - 不要重新包含问题中已有的代码]

您的代码运行良好，正如您将看到的，我确定包含以下资源；

Jquery 本身 - https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js

jQuery UI - https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

在我的示例中更改以下内容；

active: 1,

到

active: 0,

您会看到选择了不同的选项卡。

祝你好运

【讨论】：

嗨@Will，谢谢你的建议。很高兴看到代码正在运行，尽管它仍然无法在我身边运行......我已经包含了 jQuery 和 jQueryUI，如您的示例中所示，但是我的 JS 是从我的 HTML 页面运行的 - 这可能不是什么的一部分导致错误？
你能告诉我你是如何包含资源的吗？
嗨@Will，当然。请看下面：``
你的代码中没有结束脚本标签？？
嗨@Will，抱歉-我做了参考检查，我一定是在我的评论中不小心删除了它。我的代码中确实有一个结束脚本标记。