admin管理员组

文章数量:1406722

I am new to web development and I want to add following function to my simple html page but if I press "click me" does not happen anything. description part does not hide and show

This is the code I tried

I added those codes as below. CSS is working perfectly. but JavaScript does not work. How can I fix this issue 

<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="hpcss.css">
<script>
// Hide all the elements in the DOM that have a class of "box"
$('.box').hide();

// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
    $(this).show(0).on('click', function(e) {
        // This is only needed if your using an anchor to target the "box" elements
        e.preventDefault();

        // Find the next "box" element in the DOM
        $(this).next('.box').slideToggle('fast');
    });
});
</script>


</head>
<body align="center">
<a href="#" class="clickme">Click Me</a>
<div class="box">
    First Description
</div>

<a href="#" class="clickme">Click Me</a>
<div class="box">
    Second Description
</div>


</body>

</html>

I am new to web development and I want to add following function to my simple html page but if I press "click me" does not happen anything. description part does not hide and show

This is the code I tried

I added those codes as below. CSS is working perfectly. but JavaScript does not work. How can I fix this issue 

<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="hpcss.css">
<script>
// Hide all the elements in the DOM that have a class of "box"
$('.box').hide();

// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
    $(this).show(0).on('click', function(e) {
        // This is only needed if your using an anchor to target the "box" elements
        e.preventDefault();

        // Find the next "box" element in the DOM
        $(this).next('.box').slideToggle('fast');
    });
});
</script>


</head>
<body align="center">
<a href="#" class="clickme">Click Me</a>
<div class="box">
    First Description
</div>

<a href="#" class="clickme">Click Me</a>
<div class="box">
    Second Description
</div>


</body>

</html>
  • javascript
  • jquery
  • html
Share Improve this question asked Feb 3, 2015 at 6:49 DSMDSM 311 silver badge8 bronze badges 2
  • 1 What is your issue.The fiddle seem to be working fine – Nibin Commented Feb 3, 2015 at 6:51
  • Div tag does not hide and show... I added to javascript to <head> tag. Is it correct ? – DSM Commented Feb 3, 2015 at 6:52
Add a ment  | 

5 Answers 5

Reset to default 5

You need to import jQuery, and only run the code once jQuery has loaded

HTML:

<script src="https://code.jquery./jquery-1.11.2.min.js"></script>

JS:

$(function() {
    // your code here
})

The fiddle is working because jsfiddle automatically runs on DOM load, and inserts jQuery for you.

here is the actual source from jsfiddle (behind the scenes):

<script type='text/javascript'>//<![CDATA[ 
$(function(){
// Hide all the elements in the DOM that have a class of "box"
$('.box').hide();

// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
    $(this).show(0).on('click', function(e) {
        // This is only needed if your using an anchor to target the "box" elements
        e.preventDefault();

        // Find the next "box" element in the DOM
        $(this).next('.box').slideToggle('fast');
    });
});

});//]]>  

</script>

you should do somethings like that:

$(document).ready(function() {
  // add your code here
})

you run javascript before finishing load html --> error

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

embed this before your script.

Try to wrap your js code into 

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(function() {
        // your code will be here       
    });
</script>

It means that your code will be executed after page elements are loaded. Also I'v added jquery include.

You attach the events before the DOM is created. When you're calling

// Make sure all the elements with a class of "clickme" are visible and bound
// with a click event to toggle the "box" state
$('.clickme').each(function() {
    $(this).show(0).on('click', function(e) {
        // This is only needed if your using an anchor to target the "box" elements
        e.preventDefault();

        // Find the next "box" element in the DOM
        $(this).next('.box').slideToggle('fast');
    });
});

The elements with the clickme class have not been created yet.

You can fix it by putting your script tags before the </body> tag, but by wrapping your javascript in a self-executing function like so:

$(function()
{
    // Hide all the elements in the DOM that have a class of "box"
    $('.box').hide();

    // Make sure all the elements with a class of "clickme" are visible and bound
    // with a click event to toggle the "box" state
    $('.clickme').each(function() {
        $(this).show(0).on('click', function(e) {
        // This is only needed if your using an anchor to target the "box" elements
            e.preventDefault();

            // Find the next "box" element in the DOM
            $(this).next('.box').slideToggle('fast');
        });
    });
});

Also, you're not including the jQuery library.

Always check the console for errors.

本文标签： jqueryHow to add javascript to HTML PageStack Overflow

版权声明：本文标题：jquery - How to add javascript to HTML Page? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745040432a2639044.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。