How can I dynamically switch div id's

Go To StackoverFlow.com

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?

2012-04-03 20:22
by Andrew Fairbairn
Are you using jQuery - mikevoermans 2012-04-03 20:24
you should not be changing id's instead you should be add/removing a class called current on each div - David Nguyen 2012-04-03 20:25
I'm not using jquery, I've only recently started teaching myself html and more recently javascript, the latter of which I don't really understand - Andrew Fairbairn 2012-04-03 20:47
You will save yourself a lot of pain and trouble by learning some jQuery. The equivalent DOM code (using the "basic" JavaScript browser functions) is usually long-winded and therefore hard to write and maintain. jQuery's basic premise is that you select some elements and perform operations on them, using $('selector_string').doStuff(). The "selector strings" usually look a lot like CSS rules. For example, div.tab means "all div elements that have the class tab. - jnylen 2012-04-03 20:59


7

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.

2012-04-03 20:27
by jnylen
I like to do something more like this for your second line:

$('div.tab.current').removeClass('current');

since you only want to remove .current from an element that already has it - Code Junkie 2012-04-03 20:46

Sure, that works. Yours may be faster too, especially if jQuery can hand that selector off to the browser's native functions - jnylen 2012-04-03 20:58
May I ask where I'd incorporate this code segment? As I'm completely new to jQuery I'm not at all sure of the layout of things - Andrew Fairbairn 2012-04-03 21:05
This code segment would go in a <script> tag. I've updated my answer with an example - jnylen 2012-04-03 21:32
Thank you very much, I'll include it externally anyway : ). Thanks again - Andrew Fairbairn 2012-04-03 21:39
One last problem, it works now, however the links themselves won't, I have this for the link, '' and though the div changes to 'class="tab current"' like I wanted, the link refuses to take me anywhere - Andrew Fairbairn 2012-04-03 21:45
Take out the return false; in the JavaScript code. I don't think that's very useful though, since the link will load a new page right when you click on it. (Use <a target="_blank"> to make a link open in a new window. - jnylen 2012-04-03 21:49
okay, that's fine, I've already defined a target. Thanks again - Andrew Fairbairn 2012-04-03 21:51


0

you can change everything but the id !

2012-04-03 20:24
by Luca Rocchi
use some javascript code like var currentId="div1" to get track of what current id value actually i - Luca Rocchi 2012-04-03 20:29
That's one approach. I like using class="current" better for two reasons: you probably don't really need to track the current ID value, and using a class makes it really easy to apply CSS rules - jnylen 2012-04-03 20:41
i agree that class approach is more advanced .. i just want to show him tthe simplest way to use javascript to track the current i - Luca Rocchi 2012-04-03 21:21