【发布时间】：2014-05-06 01:44:39
【问题描述】：
好吧，我有一个 wordpress 网站：http://reformpackagingmachine.com
我有一个滑块问题，我收到了这个错误：
“TypeError: jQuery(...).easyResponsiveTabs 不是函数”
activate: function(event) { // tab 切换时的回调函数
在萤火虫上-我认为这是 bxSlider 之外的另一个问题-
我不是制作网站的人，而是上一页。开发人员跑了，我必须解决这个问题。
我知道这样的错误可能是因为 jQuery 或 jQuery ui 文件的路径，但我已经检查过了。
当我尝试在 http://validator.w3.org 进行验证时，它给出了一些关于 <link> 元素的错误，因为它们在 footer.php 文件中。所以我把它们移到了 header.php 并得到了验证。
所以我的滑块（水平和垂直）不起作用，我真的不明白为什么会出现这个错误。我的意思是它与滑块有什么关系？
这是我的头部标记，
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="/wp-content/themes/aykamakina/bxslider/jquery.bxslider.min.js"></script>
<link type="text/css" href="/wp-content/themes/aykamakina/bxslider/jquery.bxslider.css" rel="stylesheet" media="all">
<script src="/wp-content/themes/aykamakina/tabs/js/easyResponsiveTabs.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/wp-content/themes/aykamakina/tabs/css/easy-responsive-tabs.css">
<link rel="stylesheet" href="/wp-content/themes/aykamakina/fancybox/source/jquery.fancybox.css" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" media="all">
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="/wp-content/themes/aykamakina/fancybox/source/jquery.fancybox.js"></script>
这是滑块的标记：
<div class="the-main-slider-container">
<ul class="bxslider">
<li>
<img alt="slider" src="/wp-content/uploads/2014/03/slider-1.jpg">
</li>
<li>
<img alt="slider" src="/wp-content/uploads/2014/03/slider-2.jpg">
</li>
<li>
<img alt="slider" src="/wp-content/uploads/2014/03/slider-3.jpg">
</li>
<li>
<img alt="slider" src="/wp-content/uploads/2014/03/slider-4.jpg">
</li>
<li>
<img alt="slider" src="/wp-content/uploads/2014/03/slider-5.jpg">
</li>
</ul>
<div id="bx-pager">
<div class="pager-wrapper">
<div class="pager-container">
<a data-slide-index="0" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-features.png"></a>
<a data-slide-index="1" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-confezioni.png"></a>
<a data-slide-index="2" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-vantaggi.png"></a>
<a data-slide-index="3" href=""><img alt="icone" src="/wp-content/uploads/2014/03/D320-icone-features-specifiche.png"></a>
<a data-slide-index="4" href=""><img alt="icone" src="/wp-content/uploads/2014/03/d320-icone-compact2.png"></a>
</div>
</div>
</div>
</div>
这是 bxslider 的脚本：
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function()
{
jQuery('.bxslider').bxSlider({
pagerCustom: '#bx-pager',
mode: 'fade'
});
});
jQuery(function ($) {
$(document).ready(function(){
$('.slider8').bxSlider({
mode: 'vertical',
slideWidth: 300,
minSlides: 2,
slideMargin: 10
});
});
});
jQuery(document).ready(function() {
jQuery(".various").fancybox({
maxWidth : 450,
maxHeight : 400,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
这是easyResponsiveTabs的脚本：
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#horizontalTab').easyResponsiveTabs({
type: 'default', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true, // 100% fit in a container
closed: 'accordion', // Start closed if in accordion view
activate: function(event) { // Callback function if tab is switched
var $tab = jQuery(this);
var $info = jQuery('#tabInfo');
var $name = jQuery('span', $info);
$name.text($tab.text());
$info.show();
}
});
});
</script>
我知道它看起来令人困惑，但我相信如果您转到链接并检查它，您会看得更清楚。你会看到它现在看起来很糟糕而且它已经上线了！
如果我错过了有关此说明的任何必要信息，请告诉我，以便我添加。
所以我对各种有用的信息完全开放。提前非常感谢！
Edit #1我试过像这样使用 noConflict：
<script type="text/javascript">
var j = jQuery.noConflict();
j(document).ready(function () {
j('#horizontalTab').easyResponsiveTabs({
type: 'default', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true, // 100% fit in a container
closed: 'accordion', // Start closed if in accordion view
activate: function(event) { // Callback function if tab is switched
var $tab = jQuery(this);
var $info = jQuery('#tabInfo');
var $name = jQuery('span', $info);
$name.text($tab.text());
$info.show();
}
});
});
</script>
但它不起作用，我遇到了同样的错误......
【问题讨论】：
-
这里是一个关于如何使用 jQuery 的例子 .noConflict() stackoverflow.com/questions/21735713/…
标签： javascript php jquery html wordpress