javascript button click

I'm transferring this fiddle to a regular html page.

http://jsfiddle.net/cd0meuva/

The fiddle works just fine.

This is my code for my html page but when i click on the buttons on my html page they don't work.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    

    <style type="text/css">

        .content { display:none; }
        .displayed { display:block; }

    </style>

    <script type="text/javascript">

        $('#buttons button').click(function () {
            $('.displayed').removeClass('displayed');
            var div = $(this).data('div');
            $(div).addClass('displayed');
        });

    </script>



</head>
<body>

<div id="buttons">
   <button data-div="#div1">Button 1</button>
   <button data-div="#div2">Button 2</button>
   <button data-div="#div3">Button 3</button>
</div>

<div class="content" id="div1">This is div 1</div>
<div class="content" id="div2">This is div 2</div>
<div class="content" id="div3">This is div 3</div>

</body>
</html>

Open in new window


My html page buttons should work just like the fiddle above.

Anyone know what i'm doing wrong?
LVL 1
maqskywalkerAsked:
Who is Participating?
 
Randy DownsConnect With a Mentor OWNERCommented:
You are missing this:
See my page.

<script type="text/javascript">//<![CDATA[ 
$(function(){
$('#buttons button').click(function() {
    $('.displayed').removeClass('displayed');
    var div = $(this).data('div');
    $(div).addClass('displayed');
});
});//]]>  

</script>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.