使用 jquery 切换时如何更改活动切换锚的样式？答案

【问题标题】：How to change style of active toggled anchor when using jquery toggle?使用 jquery 切换时如何更改活动切换锚的样式？
【发布时间】：2013-12-20 18:37:56
【问题描述】：

我正在使用以下内容来切换页面上包含相关数据的多个链接

<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 时？然后在不正常的时候恢复正常？

当前设置的JSfiddle http://jsfiddle.net/W3HtS/1/

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

在点击功能上添加活动类名

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

DEMO

【讨论】：

谢谢，这可以解决一个小问题。如果您再次使用相同的按钮关闭活动按钮，则活动类仍然存在。只有当您打开其他之一时，它才会消失。有什么办法可以解决这个问题，所以如果你打开/关闭同一个div，它就会恢复正常？

【解决方案2】：

试试这个方法：Working Fiddle

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

【讨论】：

感谢您提供此解决方案，但请查看对其他解决方案的回复，此解决方案也有同样的小问题。 :)
谢谢，但似乎根本无法让新代码工作？你能发布一个更新的 jsfiddle 看看我做错了什么吗？
见我提供的小提琴。

【解决方案3】：

试试这个

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

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

定义你想在highlight类中应用的样式

【讨论】：

谢谢，这也有效，但与其他解决方案有同样的问题。如果您再次使用相同的按钮关闭活动按钮，则突出显示类仍然存在。只有当您打开其他之一时，它才会消失。如果样式在通过同一个按钮关闭时可以恢复为默认值，我会更喜欢它。