jQuery on click change toggle class on a div

Question

I have 4 href's which when clicked on i need to change the class of a div.

For example: - Click on link 1 = the div class will change to s1, - Click on link 2 = the div class will change to s2, - Click on link 3 = the div class will change to s3,

And so on, I have some code below, but not sure on the jQuery as im just learning it

http://jsfiddle.net/Nh7tn/1/

<div class="vehicleJourney">
    <div id="progress">
        <div id="complete" class="s2"><!--need class to change -->
            <div id="marker"></div>
        </div>
    </div>

    <div class="buttons">
      <ul>
        <li class="s1"><a  class="showSingle" data-target="1">s1</a></li>
        <li class="s2"><a  class="showSingle selected" data-target="2">s2</a></li>
        <li class="s3"><a  class="showSingle" data-target="3">s3</a></li>
        <li class="s4"><a  class="showSingle" data-target="4">s4</a></li>
      </ul>
    </div>

</div>

Cheers

Denys Séguret · Accepted Answer · 2012-10-30 15:38:27Z

3

If you want to apply to the div the class in the text of the link, you may do this :

$('a.showSingle').click(function(){
   $('#complete').attr('class', $(this).text()); 
});

Demonstration

If you want to apply to the div the class of the parent of the link, you may do this :

$('a.showSingle').click(function(){
   $('#complete').attr('class', $(this).parent().attr('class')); 
});

Demonstration

If you want to apply to the div a class computed from the number of the link, you may do this :

$('a.showSingle').click(function(){
   $('#complete').attr('class', 's'+($(this).parent().index()+1)); 
});

Demonstration

When you're in your real application (i.e. not in jsfiddle), the code should be embedded in a ready callback in a script at the end of your body :

<script>
    $(function(){
       $('a.showSingle').click(function(){
          $('#complete').attr('class', 's'+($(this).parent().index()+1)); 
       });
    });
</script>

edited Oct 30, 2012 at 15:38

answered Oct 30, 2012 at 15:31

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Over a year ago

cheers, the text within <a class="showSingle" data-target="1">s1</a></li> reads something else, i just put that in there for demo purposes

Skpd · Accepted Answer · 2012-10-30 15:33:49Z

0

Try this:

$(document).ready(function() {
    $('.showSingle').click(function() {
        $('#complete').attr('class', '').addClass('s' + $(this).data('target'));
    });
});

answered Oct 30, 2012 at 15:33

Skpd

6703 silver badges17 bronze badges

Comments

A. Wolff · Accepted Answer · 2012-10-30 15:34:06Z

0

See the updated jsfiddle

$('.showSingle').click(function(){$('#complete').attr('class',$(this).html());});

answered Oct 30, 2012 at 15:34

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Comments

Sven Bieder · Accepted Answer · 2012-10-30 15:34:17Z

0

That should work

$("li a").click(function(){
  var classname=$(this).text();
  $("#complete").attr("class",classname);
});

answered Oct 30, 2012 at 15:34

Sven Bieder

5,6912 gold badges23 silver badges27 bronze badges

Collectives™ on Stack Overflow

jQuery on click change toggle class on a div

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related