简体   繁体   中英

How to change style of active toggled anchor when using jquery toggle?

I'm using the following to toggle several links on a page with relevant data

<div class="buttons">
    <a  class="show" target="1">Option 1</a>
    <a  class="show" target="2">Option 2</a>
    <a  class="show" target="3">Option 3</a>
    <a  class="show" target="4">Option 4</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv">Lorum Ipsum 4</div>

JS:

$('.targetDiv').hide();
$('.show').click(function () {
    $('#div' + $(this).attr('target')).toggle('').siblings('.targetDiv').hide('');
});

Which works for what I want just fine but what I would like to know is if it's possible to have the style of the link change when each one is active. So the user knows they're viewing the contents of that link. So if the current show class is background: #000; for example, can I change it to background: #fff; somehow when that option DIV is being displayed? Then back to normal when it's not?

JSfiddle of current setup http://jsfiddle.net/W3HtS/1/

Add active class name on click function

$('.show').removeClass('active');
      $(this).addClass('active');

DEMO

Try this way : Working Fiddle

 $('.show').not(this).removeClass('active');
      if($(this).hasClass('active')){
         $(this).removeClass('active');
      }else{
         $(this).addClass('active');
      }
   });

Try this

 $('.targetDiv').hide();

   $('.show').click(function () {
            $(".show").removeClass("highlight");
        $(this).addClass("highlight");
        $('#div' + $(this).attr('target')).toggle('').siblings('.targetDiv').hide('');
        });

define the style that you want to apply in highlight class

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM