我希望在页面加载时“选择”第一个标签。
您好,我希望在页面加载时选择第一个标签“发现”。我已经在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不是函数 这是什么意思?
答案 0 :(得分:0)
下面的代码片段表明它运行正常。请检查以下内容:
$(function(){
或
$(document).ready(function(){
(两者的工作原理相同-请参阅下面的StackSnippet了解如何使用第一个)
<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>
答案 1 :(得分:0)
我已经获取了您的代码,并使用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,
,您将看到选择了另一个选项卡。
祝你好运