我希望在页面加载时“选择”第一个选项卡。
您好，我希望在页面加载时选择第一个选项卡“发现”。我在 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 不是函数 这是什么意思？
最佳答案
下面的代码片段表明它工作正常。请检查以下内容:
- 您的 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>关于javascript - 在页面加载时选择默认选项卡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56794076/