jquery在单击事件上添加类不起作用

Question

在我的项目中有菜单，我为它们提供了子菜单的 id，它在 header.php 中

<div class="top-menu">
    <ul>
    <nav class="cl-effect-13">
    <li><a href="about.php" id="about">About</a></li>
    <li><a href="product.php" id="product">Products</a></li>
    <li><a class="scroll" href="#news" id="news">News</a></li>
    <li><a href="typography.php" id="typo">Typo</a></li>
    <li><a href="contact.php" id="contact">Contact</a></li>
    </nav>
    </ul>
</div>

现在，当我点击关于它去about.php 或者如果我点击联系它去contact.php。 现在在about.php中，我像这样插入jquery。

<script type="text/javascript">
    $(document).ready(function() {
            /*
            var defaults = {
            containerID: 'toTop', // fading element id
            containerHoverID: 'toTopHover', // fading element hover id
            scrollSpeed: 1200,
            easingType: 'linear' 
            };
            */
    $().UItoTop({ easingType: 'easeOutQuart' });
    $('#about').addClass('active');
});
</script>

对于不同的 php 文件，我给出了差异。 ID。 它工作正常，直到我在 footer.php 中插入以下代码

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
            <script>
            function sendContactus() {
                var valid;  
                valid = validateContactto();
                if(valid) {
                    jQuery.ajax({
                    url: "dropusline.php",
                    data:'fname='+$("#fname").val()+'&lname='+$("#lname").val()+'&email='+$("#email").val()+'&phone='+$("#phone").val()+'&message='+$("#message").val(),
                    type: "POST",
                    success:function(data){
                    $("#mail-statusto").html(data);
                    },
                    error:function (){}
                    });
                }
            }

            function validateContactto() {
                var valid = true;   
                $(".text").css('background-color','');
                $(".error").html('');

                if(!$("#email").val()) {
                    $("#email-info").html("(required)");
                    $("#email").css('background-color','#FFFFDF');
                    valid = false;
                }
                if(!$("#message").val()) {
                    $("#message-info").html("(required)");
                    $("#message").css('background-color','#FFFFDF');
                    valid = false;
                }   
                return valid;
            }
            </script>

它是用于页脚部分查询的 ajax 代码，我将 footer.php 包含在 header.php 中提到的所有文件中。 我想要在footer.php 中的javascript 代码以及jquery 代码来执行。 现在 jquery 代码没有执行。

Answer 1

看起来您没有 easing 和 ui totop 脚本。 在调用插件之前包含它们。

按照这个顺序：

<script src="http://lab.mattvarone.com/projects/jquery/totop/js/jquery-1.7.2.min.js"></script>
<script src="http://lab.mattvarone.com/projects/jquery/totop/js/easing.js"></script>
<script src="http://lab.mattvarone.com/projects/jquery/totop/js/jquery.ui.totop.js"></script>

<script>
 $().UItoTop({easingType: 'easeOutQuart'});
</script>

Answer 2

这是通过删除footer.php中的这一行来完成的

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>

它的反映是因为我已经像这样包含在 header.php 中。

<script src="js/jquery.min.js"></script>

任何人都可以解释我为什么不叫它两次？