2 个脚本在一页中答案

【问题标题】：2 scripts in one single page2 个脚本在一页中
【发布时间】：2013-06-20 09:20:21
【问题描述】：

我有 2 个脚本 1 个脚本用于导航栏，另一个用于垂直滚动，但问题是当我插入垂直滚动脚本时导航栏的脚本不起作用。

有谁知道如何让 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>

垂直脚本：

<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：我的导航栏是固定的

【问题讨论】：

您正在加载 2 个版本的 jQuery。你能先去掉一个吗？然后创建一个小提琴link
你为什么要从 2 个不同的位置（以及至少 2 个不同的版本）包含 3 次 jQuery？
没有。我需要 2 个脚本，我在同一页面（大约 400 行代码）中对 html 进行编程，因为我希望网站滚动，而不是链接其他页面，以及导航栏脚本，是的，我需要它，因为 ny nav栏是固定的
坚持使用一个版本的 jQuery，否则只会给你带来麻烦
这些人正试图帮助你。只包含一个版本的 jQuery 并将其放在所有其他脚本之前。最新的 1.x 版本在这里：<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

标签： javascript html css

【解决方案1】：

您的第二个脚本正在覆盖第一个脚本的某些函数/值。这就是为什么您的脚本不能一起工作的原因。

尝试使用调试器来查看哪些部分起作用以及脚本在哪里失败。
尝试编写不产生冲突的代码，例如将所有数据和函数包含到“类”中。
尝试编写只需要执行任务的 html 元素的代码，例如：避免使用父元素 (window.scrollTo)。

【讨论】：