使用jquery切换时如何更改活动的切换锚的样式? [英] 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('');
});

哪个可以满足我的要求，但我想知道的是，当每个链接处于活动状态时，是否可以更改链接的样式.因此，用户知道他们正在查看该链接的内容.因此，如果当前节目类别是背景:#000;例如，我可以将其更改为背景吗:#fff;不知何故，当显示该选项DIV时?然后在不正常的时候恢复正常吗?

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 http://jsfiddle.net/W3HtS/1/

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

推荐答案

以这种方式尝试: Working Fiddle

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

这篇关于使用jquery切换时如何更改活动的切换锚的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！