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 !)
            });
 });

似乎与标签脚本的这一部分冲突：

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/dating/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.

真的可以使用一些帮助。

Really could use some help.

提前致谢：）

Luuk

推荐答案

在 tabs.js 我们有声明：

var tpj=jQuery;
tpj.noConflict();

这将变量 tpj 设置为 jQuery object，然后将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;
    });
});

我们收到错误

Uncaught TypeError：对象[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屋！