Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

javascript button click

Posted on 2015-02-23
1
Medium Priority
?
168 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 30

Accepted Solution

by:
Randy Downs earned 2000 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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

576 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