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

你应该只包含一次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的迷你版。只需加载1.4.2。

Answer 3

所以，为了给你更多的代码，看起来像这样

javascripts

<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的HTML

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

是

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

不起作用，但第一个起作用

Jquery冲突

4 个答案: