Forums

  • # March 3, 2012 at 6:46 pm

    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!

    # March 3, 2012 at 8:01 pm

    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.

    # March 3, 2012 at 9:04 pm

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

    # March 3, 2012 at 9:14 pm

    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');
    # March 3, 2012 at 9:30 pm

    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



    # March 3, 2012 at 11:50 pm

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

    # March 4, 2012 at 9:24 am

    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.

    # March 4, 2012 at 10:31 am

    Got it!

    http://jsfiddle.net/cunj2/4/
    # March 4, 2012 at 5:01 pm

    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!

    # March 5, 2012 at 1:31 pm

    Very nice that is much better thank you!!

    # June 17, 2015 at 11:50 am

    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?

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag