Home/ Questions/Q 8522579
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T07:09:45+00:00

I am trying to create three buttons that change the content inside of a

  • 0

I am trying to create three buttons that change the content inside of a div using jQuery.

I’m not sure whats wrong with this code.

<head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</head>

<body>
    <script type="text/javascript">
    var buttons = $("#buttons").find("a");
        $("buttons").click(function() {
           var id = $(this).attribute("id");
           $("pages id").css("display", "none");
           $("pages id:eq("+id+")").css("display", "block");
    });
    </script>​​​​

    <div id="buttons">
         <a href="#" id="0" class="mybutton myred">Div 1</a>
         <a href="#" id="1" class="mybutton myblue">Div 2</a>
         <a href="#" id="2" class="mybutton myblue">Div 3</a>
    </div>

    <div id="pages">
        <div id="1" class="mydivshow">1111</div>
        <div id="2" class="mydivhide">2222</div>
        <div id="3" class="mydivhide">3333</div>
    </div>
</body>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It looks like you’ve got a few misconceptions that need clearing up. Don’t worry you’re clearly on the right track.

    First, you need to wrap your call inside a document.ready event like so.

    <script type="text/javascript">
$(document).ready(function() {
    var buttons = $("#buttons").find("a");
        $("buttons").click(function() {
           var id = $(this).attr("id");
           $("pages id").css("display", "none");
           $("pages id:eq("+id+")").css("display", "block");
    });
});
</script>​​​​

    The reason for this is because your HTML is rendered sequentially, that is, it reads it line by line. When your javascript code executes the HTML for the buttons hasn’t been rendered yet so it has no idea what you are talking about. Also notice that the ready event handler is constructed almost identically to the click event handler. You’re just operating on a different object and using a different event.

    Next issue is that you seem to be struggling with how selectors work.

    var buttons = $("#buttons").find("a");

    You’re actually using two selectors here. $() and .find() do almost the same exact thing. The jQuery object selector however is used to query the entire document and find is used to query a subset. So for what you’re trying to do this would be more appropriate:

    var buttons = $("a");

    This simply says “select all anchor tags”. When a selector does not start with a special character it is simply looking for tags of that type. The # character queries all elements with the id and the . character queries all elements of that class. So your first statement was actually querying for any elements with the id “buttons” which don’t exist.

    Lastly you don’t need to create a var for what you’re trying to do so for simplicity’s sake we’ll just get rid of that line and move on to the click handler.

    <script type="text/javascript">
$(document).ready(function() {
    $("a").click(function() {
       var id = $(this).attribute("id");
       $("pages id").css("display", "none");
       $("pages id:eq("+id+")").css("display", "block");
    });
});
</script>​​​​

    The next issue is that you’re using the ID attribute as a data field. Don’t do this. If you need to store information about an element within it’s tag use a custom attribute starting with the prefix “data-“. So in this case lets change your anchor tags around.

    <div id="buttons">
     <a href="#" data-id="0" class="mybutton myred">Div 1</a>
     <a href="#" data-id="1" class="mybutton myblue">Div 2</a>
     <a href="#" data-id="2" class="mybutton myblue">Div 3</a>
</div>

    That’s a little better. Now we’ve got the same issue on the divs. We could do the same thing but since we’re going to be querying this information and using selectors on classes is much easier let’s just give the divs classes according to the id.

    <div id="pages">
    <div class="mydivshow div1">1111</div>
    <div class="mydivhide div2">2222</div>
    <div class="mydivhide div3">3333</div>
</div>

    Now we can get back to the jQuery and change the code. 

    <script type="text/javascript">
$(document).ready(function() {
    $("a").click(function() {
       var id = $(this).attribute("data-id"); // Using a custom attribute.
       $("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
       $(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
    });
});
</script>​​​​

    And that should do it!

    • 0