Jquery标签与革命滑块冲突 [英] Jquery tabs conflicting with revolution slider
问题描述
我正在尝试创建一个包含旋转滑块和选项卡脚本的页面.
I am trying to create a page containing revolution slider and a tabs script.
您可以在此处找到该页面:http://lovebomb.nl/dating
You can find the page here: http://lovebomb.nl/dating
但不知何故，脚本彼此冲突.
But somehow the scripts are conflicting with one another.
这部分旋转滑块:
var tpj=jQuery;
tpj.noConflict();
tpj(document).ready(function() {
if (tpj.fn.cssOriginal!=undefined)
tpj.fn.css = tpj.fn.cssOriginal;
tpj('.fullwidthbanner').revolution(
{
delay:9000,
startwidth:1024,
startheight:616,
onHoverStop:"on", // Stop Banner Timet at Hover on Slide on/off
thumbWidth:100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
thumbHeight:50,
thumbAmount:3,
navigationStyle:"round", // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom
navigationHAlign:"center", // Vertical Align top,center,bottom
navigationVAlign:"top", // Horizontal Align left,center,right
navigationHOffset:0,
navigationVOffset:20,
soloArrowLeftHalign:"left",
soloArrowLeftValign:"center",
soloArrowLeftHOffset:20,
soloArrowLeftVOffset:0,
soloArrowRightHalign:"right",
soloArrowRightValign:"center",
soloArrowRightHOffset:20,
soloArrowRightVOffset:0,
touchenabled:"off", // Enable Swipe Function : on/off
stopAtSlide:1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
stopAfterLoops:0, // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic
hideCaptionAtLimit:0, // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
hideAllCaptionAtLilmit:0, // Hide all The Captions if Width of Browser is less then this value
hideSliderAtLimit:0, // Hide the whole slider, and stop also functions if Width of Browser is less than this value
fullWidth:"on",
shadow:0 //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !)
});
});
似乎与这部分 tabs 脚本有冲突:
Seems to be conflicting with this part of the tabs script:
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
这些脚本组合在一个 JS 文件中，可以在此处找到:http://lovebomb.nl/约会/tabs.js
These scripts are combined in one JS file which can be found here: http://lovebomb.nl/dating/tabs.js
我将此站点用作选项卡脚本的基础:http://www.snelgeldonlineverdienen.nl/
I used this site as a base for the tabs script: http://www.snelgeldonlineverdienen.nl/
唯一的区别是 jquery 和 jquery UI 版本.如果我使用此页面的 jquery 版本，则旋转滑块不再起作用.
The only difference is the jquery and the jquery UI version. If I use the version of jquery of this page, the revolution slider does not work anymore.
我已经尝试修复标签大约 4 小时.
I am already trying to fix the tabs for about 4 hours.
真的需要一些帮助.
提前致谢:)
卢克
推荐答案
tabs.js 我们有声明:
var tpj=jQuery;
tpj.noConflict();
这会将变量 tpj 设置为 jQuery 对象，然后将 jQuery 放入 noConflict():
this sets the variable tpj to the jQuery object, and then puts jQuery into noConflict():
许多 JavaScript 库使用 $ 作为函数或变量名，就像 jQuery 一样.在 jQuery 的情况下，$ 只是 jQuery 的别名，因此所有功能都可以在不使用 的情况下使用$.如果您需要与 jQuery 一起使用另一个 JavaScript 库，请通过调用 $.noConflict() 将 $ 的控制权返回给另一个库."
"Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict()."
现在 jQuery 处于无冲突模式，您不能再使用 $ 来访问 jQuery.所以当我们运行 tabs.js 底部的代码时:
Now that jQuery is in no conflict mode you can no longer use the $ to access jQuery. So when we run the code at the bottom of tabs.js:
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
});
我们得到错误
未捕获的类型错误:对象 [object Object] 的属性 '$' 不是函数"
"Uncaught TypeError: Property '$' of object [object Object] is not a function"
因为 $ 不再引用 jQuery.要访问 jQuery，我们必须使用 jQuery 或 tpj
because $ no longer references jQuery. To access jQuery we must use jQuery or tpj
如果我们改变 tabs.js，将 $ 更改为 jQuery 或 tpj
if we alter the tabs.js changing $ to either jQuery or tpj
tpj(document).ready(function(){
tpj('#tabs div').hide();
tpj('#tabs div:first').show();
tpj('#tabs ul li:first').addClass('active');
tpj('#tabs ul li a').click(function(){
tpj('#tabs ul li').removeClass('active');
tpj(this).parent().addClass('active');
var currentTab = tpj(this).attr('href');
tpj('#tabs div').hide();
tpj(currentTab).show();
return false;
});
});
代码应该正确执行.
这篇关于Jquery标签与革命滑块冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
