Changing ID of a div with jquery

[jgessentials]

Hi
Is there a simple way to change the id of a div by clicking on a link?
Here is what I am going for:

Link1 gives div id=1
Link2 gives div id=2
Link3 gives div id=3

Div
image changes

Div
text changes

I am trying to make both an image and text change by clicking on the appropriate link.
I figured I could change the id of div with the image and use a sprite to get the right part of the image to show up
I would also like the text in the second div to change

Any hep would be highly appreciated
Thank you!

[Senff]

I would go with assigning (and changing) unique classes to those DIVs and target that. To change the ID of a DIV is, in my opinion, defying the purpose of having IDs in the first place.

Adding and removing classes is a breeze in jQuery.

[jgessentials]

Wonderful, how would I go about changing the classes of the div through links?

[Senff]

To add a class “-status-on” to an element that has id “blah-01”:

$('#blah-01').addClass('status-on');

To remove this class:

$('#blah-01').removeClass('status-on');

To add a class and remove another one:

$('#blah-01').removeClass('status-on').addClass('status-off');

[jgessentials]

thank you.
I’m sorry to push but I am very new to this.
How would I do it with 3 links:

Link 1 -> click changed class to 1

Link 2 -> click changed class to 2

Link 3 -> click changed class to 3

[jgessentials]

Oh that looks nice, thank you!! So what would my 3 links look like?

[jgessentials]

Thank you :)
In your example, it is when you click the text that the links get the new class and change color.

http://jsfiddle.net/cunj2/

I will try to work with it so that when you click the links the text changes color ie gets the right class according to the link that was clicked.
Thank you for sharing the code with me and all your help.

[jgessentials]

Got it!

http://jsfiddle.net/cunj2/4/

[Vermaas]

This will even work better: http://jsfiddle.net/savver/ZbXNa/

On this way you can select a color multiple times and you can easily re-use this piece of code. On this way the only thing you need to do is add some new css classes to your stylesheet and make sure everything has the right id ;)!

Enjoy it!

[jgessentials]

Very nice that is much better thank you!!

[Redish]

Hi Vermaas, I’m looking for this topic, unfortunately the link with your solution it’s broken. There’s any chance to have the code again?

[Author]

Posts