CODEWITHSUNDEEP
jqueryhtml
Sam Santamaria
Sam Santamaria

Reputation: 33

JQuery does not run in .html file

What am I doing wrong? I'm trying to get my jquery to show on my .html file, but it doesnt run! 

<!DOCTYPE html>
<html>
<head>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>
$(".mainNav a").hover(function() {
    $(this).parent().find(".subNav").slideDown('fast').show();
    $(this).parent().hover(function() {}, function() {
        $(this).parent().find(".subNav").slideUp('fast');
    });
}).hover(function() {
    $(this).addClass("subHover");
}, function() {
    $(this).removeClass("subHover");
});


</script>

Upvotes: 0

Views: 1192

Answers (2)

Shahriyar
Shahriyar

Reputation: 23

2 way you have to fixed

1.add script in head and use

<script src="source of jquery"></script>
<script>
$document.ready(function(){

some code jQuery

})
</script>

2.add script before </body> tag 

<script src="source of jquery"></script> 
<script>

enter code here here

</script>

this time you don't need $document.ready() anymore

Upvotes: 0

Lekhnath
Lekhnath

Reputation: 4625

Make sure document is ready :

$(function() {
    //YOUR jQuery CODE GOES HERE
});

OR

Move your all scripts to the <body> of your html.

<body>

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script>

    $(".mainNav a").hover(function() {
        $(this).parent().find(".subNav").slideDown('fast').show();
        $(this).parent().hover(function() {}, function() {
            $(this).parent().find(".subNav").slideUp('fast');
        });
    }).hover(function() {
        $(this).addClass("subHover");
    }, function() {
        $(this).removeClass("subHover");
    });
</script>
</body>
</html>

Upvotes: 2

Related Questions