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

dxpyg8gm 于 2023-11-17 发布在 jQuery

关注(0)|答案(2)|浏览(147)

我想第一个选项卡将在页面加载'选择'。
嗨，我想第一个选项卡，“发现”，在页面加载时被选中.我已经运行在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>

个字符
我希望在页面加载时选择标签/链接，但输出结果是标签“ Flink ”，好像被选中，然后很快就消失了。
编辑我收到这个错误：Uncaught TypeError：$（...）.tabs is not a function这是什么意思？

jquery

来源：https://stackoverflow.com/questions/56794076/select-default-tab-on-page-load

2条答案

按热度按时间

guykilcj1#

下面的代码片段显示它工作正常。请检查以下内容：
1.你的JavaScript被一个document.ready函数 Package ：
第一个月
或

$(document).ready(function(){

字符串
(both工作原理相同-请参阅下面的StackSnackSnacklist了解第一个是如何使用的）
1.您已经包含了所有必要的库（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>

的数据

展开查看全部

赞(0）回复(0）举报 2023-11-17

lsmepo6l2#

我用你的代码创建了一个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）回复(0）举报 2023-11-17

我来回答

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

2条答案

相关问题

热门标签

最新问答