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

Question

in my project have menu and i give them ids for sub menu and it's in 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>

now when i click about it goes to about.php or if i click contact it goes to contact.php. now in about.php i insert jquery like this.

<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>

and for different php file i give diff. id. it's working fine till i insert following code in 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>

it's ajax code for inquiry in footer part and i include footer.php for all files that mention in header.php. i want javascript code that in footer.php as well as jquery code to perform. now jquery code is not performing.

Answer 1

It doesn't look like you have the easing and ui totop scripts. Include them before invoking the plugin.

In this order:

<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

it's done by removing this line in footer.php

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

it's reflecting because i already included in header.php like this.

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

any one can explain me why not to call it twice?