jQuery的衝突

Question

我是新來的，我有解決不了

一個很大的問題，我有兩個腳本不彼此

在這裏工作是代碼

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> 


<script type="text/javascript"> 
$(document).ready(function(){ 
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 0, true); 
}); 
</script> 
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 

<script type="text/javascript" src="js/jquery.skripta_1.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#slider1').skripta_1(); 
    }); 
</script> 

現在，當這個代碼包含這部分

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 0, true); 
    }); 
</script> 

不起作用

但是當我刪除這部分

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 

提到的第一部分的工作，但這個

<script type="text/javascript" src="js/jquery.skripta_1.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $('#slider1').skripta_1(); 
     }); 
    </script> 

不

我已經試過了涉及noConflict和重命名一切$與jQuery，但沒有任何幫助

Answer 1

你應該永遠只包括ude jQuery一次。將兩個腳本包含到兩個不同版本的jQuery中絕對會導致頁面中斷。選擇最高版本，並堅持下去。

在你的情況下，使用1.4.2版本，並刪除googleapis之一。或切換到more recent version from Google。

這裏就是我會建議爲你的最終代碼：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> 
<script type="text/javascript" src="js/jquery.skripta_1.min.js"></script> 


<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 0, true); 
    $('#slider1').skripta_1(); 
}); 
</script> 

Answer 2

你加載的jQuery 1.3.2 和 1.4.2 Mini的。只需加載1.4.2。

Answer 3

所以，給你更多的代碼， 它看起來像這樣

的JavaScript的

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> 


<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="js/jquery.tinycarousel.min.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $('#slider1').tinycarousel(); 
     }); 
    </script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 0, true); 
    }); 
</script> 

和該JavaScript的HTML

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 0, true); 
     }); 
    </script> 

是

<div id="featured" > 
    <ul class="ui-tabs-nav"> 

<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"> 
      <a href="#fragment-1"><span> 
      <div id="movie_thumb"><img src="image.png" width="80" height="60" border="0" /></div> 
       </span></a> 
     </li> 

    <li class="ui-tabs-nav-item" id="nav-fragment-2"> 
       <a href="#fragment-2"><span> 
     <div id="movie_thumb"><img src="image2.png" width="80" height="60" border="0" /></div> 
       </span></a> 
     </li> 

      <li class="ui-tabs-nav-item" id="nav-fragment-3"> 
       <a href="#fragment-3"><span> 
       <div id="movie_thumb"><img src="image3.png" width="80" height="60" border="0" /></div> 
          </span></a> 
     </li> 

      <li class="ui-tabs-nav-item" id="nav-fragment-4"> 
       <a href="#fragment-4"><span> 
      <div id="movie_thumb"><img src="image4.png" width="80" height="60" border="0" /></div> 
       </span></a> 
      </li> 

      <li class="ui-tabs-nav-item" id="nav-fragment-5"> 
       <a href="#fragment-5"><span> 
       <div id="movie_thumb"><img src="image5.png" width="80" height="60" border="0" /></div> 
       </span></a> 
      </li> 

     </ul> 

和這個JavaScript

<script type="text/javascript"> 
      $(document).ready(function(){ 
       $('#slider1').tinycarousel(); 
      }); 
     </script> 

的HTML是

<div id="slider1"> 
    <ul class="onemo"> 
     <li> MANY THINGS GO HERE</li> 
     <li> MANY THINGS GO HERE</li> 
     <li> MANY THINGS GO HERE</li> 
     <li> MANY THINGS GO HERE</li> 
    </ul> 
</div> 

這是否可能幫助？

Answer 4

其實，這裏是我想通了

這是代碼

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> 
<script type="text/javascript" src="../js/jquery.tinycarousel.min.js"></script> 

，這是衝突的部分是一個

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> 

<script> 
    (function ($) { 
     $('#slider1').tinycarousel(); 
     $("#featured > ul").tabs({ 
      fx: { 
       opacity: "toggle" 
      } 
     }).tabs("rotate", 0, true); 
    })(jQuery); 
</script> 

時取出一部分

$('#slider1').tinycarousel(); 

不工作，不除去這部分

$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 0, true); 

不起作用，但第一個做