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

Question

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

嗨，我希望在页面加载时选择第一个选项卡“发现”。我已经在 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 不是函数这是什么意思？

Answer 1

下面的代码片段显示它工作正常。请检查以下内容：

你的 javascript 是用 document.ready 函数包装的：要么

$(function(){

或

$(document).ready(function(){

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

您已经包含了所有必要的库（CSS、jQuery.js 和 jQueryUI.js 文件）——如下面的代码片段所示。您可以将它们包含在页面的
```
<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>

Answer 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,

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

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

问题描述投票：0回答：2

2个回答

最新问题

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

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2