Question

我正在开发简单的网站，在这个网站上我有一个菜单，它正在使用jQuery和图像Slider也在使用jQuery。这是我导入脚本和css的代码：

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">    </script>
<link rel="stylesheet" type="text/css" href="css/jquery.slider.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slider.min.js"></script>

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="js/slider/themes/carbono/jquery.slider.ie6.css" />
<![endif]-->
<script type="text/javascript">
jQuery(document).ready(function ($) {
   $(".slider").slideshow({
      width: 794,
      height: 294,
      transition: 'bar'
   });
});

$(document).ready(function () {
   $('#menu a').mouseover(function () {
      $(this).switchClass('normal', 'active', 50, 'easeOutBounce', function () {});
   });
});
$(document).ready(function () {
   $('#menu a').mouseleave(function () {
      $(this).switchClass('active', 'normal', 50, 'easeOutBounce', function () {});
   });
});
</script>

在这种情况下，只有滑块正在工作。这个脚本不起作用：

$(document).ready(function () {
   $('#menu a').mouseover(function () {
      $(this).switchClass('normal', 'active', 50, 'easeOutBounce', function () {});
   });
});
$(document).ready(function () {
   $('#menu a').mouseleave(function () {
      $(this).switchClass('active', 'normal', 50, 'easeOutBounce', function () {});
   });
});

原因是什么，我应该怎么做？

Answer 1

我遇到了同样的问题

我的代码如下所示

...
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jcobb-slider/js/bjqs-1.3.min.js"></script>
<link rel="stylesheet" href="jcobb-slider/bjqs.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
...

我想在同一页面上使用jQuery图像滑块或jqueryUI选项卡式内容。

我所做的就是：

<script type="text/javascript" language="javascript" class="secret-source">

                $.noConflict();

                jQuery(document).ready(function ($) {

                    $('#banner-fade').bjqs({
                        height: 280,
                        width: 570,
                        responsive: true
                    });

                    $("#tabs").tabs(); //jQuery UI Tabs

                });

            </script>

然后就可以了。

jQuery简单的插件冲突

1 个答案: