许多人遇到的问题,但我无法弄明白。
我在Chrome开发者工具中收到以下错误:
未捕获的TypeError:undefined不是 ----- 的函数 bootstrapwizard.js:3
(匿名函数) ----- jquery-1.11.2.min.js:2
m.Callbacks.j ----- jquery-1.11.2.min.js:2
m.Callbacks.k.fireWith ----- jquery-1.11.2.min.js:2
m.extend.ready ----- jquery-1.11.2.min.js:2 J
我尝试了以下内容:
1)将脚本移动到自己的js文件
2)替换我包含“jQuery”,“Bootstrap”和“script”
的地方3)搜索在线解决方案
你能帮我解决这个问题吗?感谢
The page can be found here. Its on Norwegian, but the bar is on English.
标题
<!-- jQuery --->
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.11.2.min.js"></script>
<?php wp_enqueue_script("jquery"); ?>
<!-- Boostrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- jQuery scrips -->
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/hideheader.js"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/bootstrapwizard.js"></script>
<?php wp_head(); ?>
的jQuery
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index+1;
var $percent = ($current/$total) * 100;
$('#rootwizard').find('.bar').css({width:$percent+'%'});
}});
});
HTML
<div class="container">
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li><a href="#tab1" data-toggle="tab">First</a></li>
<li><a href="#tab2" data-toggle="tab">Second</a></li>
<li><a href="#tab3" data-toggle="tab">Third</a></li>
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
</ul>
</div>
</div>
</div>
<div id="bar" class="progress progress-striped active">
<div class="bar"></div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="#">First</a></li>
<li class="previous"><a href="#">Previous</a></li>
<li class="next last" style="display:none;"><a href="#">Last</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</div>
</div>
</div>
答案 0 :(得分:3)
在您描述的页面中,没有调用bootstrapWizard.js文件, 您需要将其添加到您的scrips中,或者从CDN链接加载它,例如:
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.js
编辑:调用bootstrapWizard,但它不是同一个文件。它只包含“onload”功能。