2013-06-20 37 views
-4

我有兩個腳本 1個腳本用於導航欄,另一個用於垂直滾動,但問題是當插入垂直滾動腳本時導航欄腳本不工作。單個頁面中的2個腳本

是否有人知道如何把2個腳本同時工作?

導航欄的腳本:

<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script><script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script> 
<!--[if IE]> 
<style type="text/css">.jimgMenu {position:relative;width:630px;height:200px;overflow:hidden;margin-left:20px;}</style> 
<![endif]--> 
<script type="text/javascript"> 
$(document).ready(function() { 

    // find the elements to be eased and hook the hover event 
    $('div.jimgMenu ul li a').hover(function() { 

     // if the element is currently being animated (to a easeOut)... 
     if ($(this).is(':animated')) { 
      $(this).stop().animate({ 
       width: "310px" 
      }, { 
       duration: 450, 
       easing: "easeOutQuad" 
      }); 
     } else { 
      // ease in quickly 
      $(this).stop().animate({ 
       width: "310px" 
      }, { 
       duration: 400, 
       easing: "easeOutQuad" 
      }); 
     } 
    }, function() { 
     // on hovering out, ease the element out 
     if ($(this).is(':animated')) { 
      $(this).stop().animate({ 
       width: "78px" 
      }, { 
       duration: 400, 
       easing: "easeInOutQuad" 
      }) 
     } else { 
      // ease out slowly 
      $(this).stop('animated:').animate({ 
       width: "78px" 
      }, { 
       duration: 450, 
       easing: "easeInOutQuad" 
      }); 
     } 
    }); 
}); 
</script> 

vertival腳本:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>  
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $(".contactLink").click(function() { 
     if ($("#contactForm").is(":hidden")) { 
      $("#contactForm").slideDown("slow"); 
     } else { 
      $("#contactForm").slideUp("slow"); 
     } 
    }); 
}); 

function closeForm() { 
    $("#messageSent").show("slow"); 
    setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000); 
} 

$(document).ready(function() { 
    function filterPath(string) { 
     return string.replace(/^\//, '') 
      .replace(/(index|default).[a-zA-Z]{3,4}$/, '') 
      .replace(/\/$/, ''); 
    } 
    $('a[href*=#]').each(function() { 
     if (filterPath(location.pathname) == filterPath(this.pathname) && location.hostname == this.hostname && this.hash.replace(/#/, '')) { 
      var $targetId = $(this.hash), 
       $targetAnchor = $('[name=' + this.hash.slice(1) + ']'); 
      var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false; 
      if ($target) { 
       var targetOffset = $target.offset().top; 
       $(this).click(function() { 
        $('html, body').animate({ 
         scrollTop: targetOffset 
        }, 1000); 
        var d = document.createElement("div"); 
        d.style.height = "101%"; 
        d.style.overflow = "hidden"; 
        document.body.appendChild(d); 
        window.scrollTo(0, scrollToM); 
        setTimeout(function() { 
         d.parentNode.removeChild(d); 
        }, 10); 
        return false; 
       }); 
      } 
     } 
    }); 
}); 
</script> 

PS:我的導航欄是固定的

+3

您正在加載2個版本的jQuery。你可以先刪除一個嗎?然後創建一個小提琴[鏈接](http://jsfiddle.net) – mohkhan

+7

爲什麼你在兩個不同的位置(至少有兩個不同的版本)3次包括jQuery? – Kai

+0

不需要。我需要2個腳本,即時通訊編程所有的HTML在同一頁面(約400行代碼),因爲我希望網站滾動,而不是鏈接其他頁面,導航欄腳本,是的,我需要它,因爲ny導航欄是固定的 –

回答

0

你的第二個腳本overwritting一些功能/第一個腳本的值。這就是爲什麼你的腳本不能一起工作。

  1. 試着讓我們調試器看看哪些部分工作和腳本失敗。
  2. 嘗試編寫不會產生問題的代碼,例如將所有數據和函數都包含到「類」中。
  3. 嘗試編寫只需要執行其任務的html元素的代碼,例如:避免使用父元素(window.scrollTo)。