Home/ Questions/Q 7757889
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T13:12:46+00:00

I have 4 divs next to each other, each containing a link. I want

  • 0

I have 4 divs next to each other, each containing a link. I want to dynamically switch the id of “current” around,

for example.

<div name="1" id="current">
<a>
link
</a>
</div>
<div name="2">
<a>
link
</a>
</div>
<div name="3">
<a>
link
</a>
</div>
<div name="4">
<a>
link
</a>
</div>

How can I dynamically change which one is the current one when the link is clicked?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Don’t do this. Element IDs should not change based on the state of the web page. Use another attribute instead, like class="current".

    If you’re using jQuery, which I highly recommend, you can do this as follows:

    $('div.tab a').click(function() {
  $('div.tab').removeClass('current');
  $(this).closest('div.tab').addClass('current');
  return false;
});

    To make this code work, you need to add class="tab" to your <div> elements. This is a good idea especially if you have other <div> elements on the page. If you do this, the current tab would then have an attribute class="tab current". jQuery knows how to handle this properly.

    Also, I would consider using the id attribute instead of the name attribute, and giving your <a> tags a href attribute so that browsers will show them as clickable elements. For example:

    <div id="tab1" class="tab">
  <a href="#">tab 1</a>
</div>

    Here’s an example of how to include this script (assuming that you have JQuery saved as a file jquery.js in the same directory as the HTML page):

    <!DOCTYPE html>
<html>
  <head>
    <title>Testing jQuery</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $(function() {
        $('div.tab a').click(function() {
          $('div.tab').removeClass('current');
          $(this).closest('div.tab').addClass('current');
          return false;
        });
      });
    </script>
  </head>
  <body>
    <div id="tab1" class="tab current">
      <a href="#">tab1 link</a>
    </div>
    <div id="tab2" class="tab">
      <a href="#">tab2 link</a>
    </div>
    <div id="tab3" class="tab">
      <a href="#">tab3 link</a>
    </div>
    <div id="tab4" class="tab">
      <a href="#">tab4 link</a>
    </div>
  </body>
</html>

    A couple of notes about that:

    • Really, it’s better to put your site’s JavaScript in a separate file and include it with <script type="text/javascript" src="filename.js"></script>, but including it “inline” like I’ve done is fine for small projects or just playing around with stuff.

    • The $(function() { ... }); is shorthand for $(document).ready(function() { ... });, which means the code inside that block will be executed as soon as the browser has finished loading the HTML document structure. For example, you don’t want your JavaScript to execute before the browser has finished downloading the rest of the page.

    • 0