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>

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

编辑我收到此错误：未捕获的TypeError：$（...）。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

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

{主持人注意-不重新添加问题中已经存在的代码]

您的代码可以正常工作，并且您将看到，我确保同时包含以下两个资源；

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,

，您将看到选择了另一个选项卡。

祝你好运

选择页面加载时的默认标签

2 个答案: