Javascript Jquery选项卡与旋转滑块冲突

我正在尝试创建一个包含revolution滑块和tabs脚本的页面

您可以在此处找到该页面：

但不知何故，这些脚本相互冲突

旋转滑块的这一部分：

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

似乎与选项卡脚本的此部分冲突：

$(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文件中，可在此处找到：

我将此网站用作tabs脚本的基础：

唯一的区别是jquery和jQueryUI版本。 如果我使用这个页面的jquery版本，革命滑块将不再工作

我已经试着修复了大约4个小时的标签

真的需要一些帮助

提前感谢：）

Luuk

在本节开始时，我们有以下声明：

var tpj=jQuery;
tpj.noConflict();

这将变量tpj设置为jQuery对象，然后将jQuery放入：

许多JavaScript库使用$作为函数或变量名，就像jQuery一样。在jQuery中，$只是jQuery的别名，因此所有功能都可以在不使用$的情况下使用。如果需要在jQuery旁边使用另一个JavaScript库，则通过调用$.noConflict（）将$的控制权返回给另一个库

现在jQuery处于无冲突模式，您不能再使用$访问jQuery。因此，当我们运行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;
    });
});

我们得到了错误

“未捕获的TypeError:对象[object]的属性“$”不是函数”

因为$不再引用jQuery。要访问jQuery，我们必须使用jQuery或tpj

如果我们将tabs.js更改为jQuery或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库版本（1.7.1+），尝试将上述代码修改为以下内容，并将两者合并到init.js中的单个文件中，并放置在页面中包含的所有*.js文件的底部

   jQuery(document).ready(function() {
       if (jQuery.fn.cssOriginal!=undefined)
         jQuery.fn.css = jQuery.fn.cssOriginal;
           jQuery('.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 !)
        });
 });       

   jQuery(document).ready(function(){
      jQuery('#tabs div').hide();
      jQuery('#tabs div:first').show();
      jQuery('#tabs ul li:first').addClass('active');
      jQuery('#tabs ul li a').click(function(){ 
      jQuery('#tabs ul li').removeClass('active');
      jQuery(this).parent().addClass('active'); 
      var currentTab = jQuery(this).attr('href'); 
     jQuery('#tabs div').hide();
     jQuery(currentTab).show();
     return false;
    });
    });

---

在Meteor上使用罐装html/css/js登录页模板时遇到此问题。在我的例子中，从解决方案中删除jquery-1.11.1.min.js和jquery-1.11.1.min.map文件修复了此问题，因为我已经将最新版本作为软件包安装。希望这对将来的解决方案搜索者有所帮助。

小伙子想看看答案：）不幸的是，这不是答案。我尝试了你的代码，它仍然以同样的方式显示。@ceetee谢谢你的时间，希望你能进一步帮助我？嘿，Luuk，刚刚更新了最后一个代码段。$（文档）开头的$。ready还需要用tpj或jQuery替换。