Question

我有一个joomla网站，在一篇文章中我称之为HTML页面。

在这个html页面中，我创建了一些与bx-slider结合使用垂直滚动条的东西，以便在页面上平滑滚动到锚点的锚链接（参见adriantomic.se jquery localscroll tutorial的教程

这很好用！没问题。

但现在我在php的joomla文章中称这个页面：。这也不是问题。但这个模板来自joomlart（puresite），我收到了一个我不明白的冲突错误：

TypeError: jmega.getElement is not a function
http://reset.nl/templates/puresite/js/mega.rjd.js
Line 25

TypeError: $(...).ready is not a function
http://reset.nl/media/system/js/mootools-core.js
Line 28

我尝试过noConflict的不同变种，但它没有帮助。如果我更改jQuery（document.function（$），那么似乎某些函数正在运行到无限循环中。

有人知道如何解决这个问题吗？

尼科。这是我的页面代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <!-- bxSlider CSS file -->
        <link href="/components/com_scroll_content/lib/jquery.bxslider.css" rel="stylesheet" />

        <!-- Some CSS -->
       <style type="text/css">
       /* CSS for the big boxes */
           .box {
              width: 300px;
              height: 300px;

              color: #fff;
              padding: 10px;

              margin: 100px 0 0 0;
           }

           #box1 {
              margin: 300px 0 0 0;
              background: blue;
           }

           #box2 {
              background: red;
           }

           #box3 {
              background: green;
           }

           #box4 {
              background: gray;
           }

           /* CSS for the small boxes that will scroll inside a div */

           #small-box-container {
              border: 1px solid black;
              padding: 20px;
              width: 300px;
              height: 200px;

              overflow: scroll;
           }

           .small-box {

              color: #fff;
              padding: 10px;

              width: 200px;
              height: 200px;
              margin: 0 0 50px 0;
           }

           #small-box1 {
              background: blue;
           }

           #small-box2 {
              background: red;
           }

           #small-box3 {
              background: green;
           }
       </style>

        <!-- jQuery library (served from Google) -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <!-- Load jQuery This is from the joomlaart template-->
        <!--<script src="/templates/ResetFashion/js/jquery/jquery.noconflict.js"></script>-->
        <!-- bxSlider Javascript file -->
        <script src="/components/com_scroll_content/js/jquery.bxslider.min.js"></script>

        <!-- Load ScrollTo -->
        <script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>

        <!-- Load LocalScroll -->
        <script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>

        <script>

            //var $jQ = jQuery.noConflict();
            $(document).ready(function(){
            //(function(jQ){
            //  jQ(window).load(function(){

                $('.bxslider').bxSlider({
                    minSlides: 1,
                    maxSlides: 2,
                    slideWidth: 170,
                    slideMargin: 10,
                    responsive: true
                });

                // Scroll the whole document
              $('#box-links').localScroll({
                 target:'body'
              });

              // Scroll the content inside the #scroll-container div
              $('#small-box-links').localScroll({
                 target:'#small-box-container'
              });
            });

        //})(jQuery);
        </script>
    </head>
    <body>

        <div id="small-box-links">      
            <ul class="bxslider">
              <li><a href="#small-box1"><img src="/components/com_scroll_content/images/trees.jpg" /></a></li>
              <li><a href="#small-box2"><img src="/components/com_scroll_content/images/tree_root.jpg" /></a></li>
              <li><a href="#small-box3"><img src="/components/com_scroll_content/images/houses.jpg" /></a></li>
              <li><img src="/components/com_scroll_content/images/hill_road.jpg" /></li>
              <li><img src="/components/com_scroll_content/images/me_trees.jpg" /></li>
              <li><img src="/components/com_scroll_content/images/hill_trees.jpg" /></li>
              <li><img src="/components/com_scroll_content/images/mountain.jpg" /></li>
              <li><img src="/components/com_scroll_content/images/houses.jpg" /></li>
            </ul>
        </div>

        <div id="small-box-container">
            <div id="small-box1" class="small-box">Small-Box #1</div>
            <div id="small-box2" class="small-box">Small-Box #2</div>
            <div id="small-box3" class="small-box">Small-Box #3</div>
        </div>

    </body>
</html>

Answer 1

我重写了你的jquery代码：

<script>
        $.noConflict();
        $(document).ready(function($){
        //(function(jQ){
        //  jQ(window).load(function(){

            $('.bxslider').bxSlider({
                minSlides: 1,
                maxSlides: 2,
                slideWidth: 170,
                slideMargin: 10,
                responsive: true
            });

            // Scroll the whole document
          $('#box-links').localScroll({
             target:'body'
          });

          // Scroll the content inside the #scroll-container div
          $('#small-box-links').localScroll({
             target:'#small-box-container'
          });
        });

    //})(jQuery);
    </script>

Hpoe为你工作。

Joomla 3.x jQuery冲突但在库的jQuery mootools之间但noConflict似乎无法工作

1 个答案: