Solved

javascript button click

Posted on 2015-02-23
1
158 Views
Last Modified: 2015-02-23
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?
0
Comment
Question by:maqskywalker
1 Comment
 
LVL 29

Accepted Solution

by:
Randy Downs earned 500 total points
ID: 40625963
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

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question