如何在使用 jquery 切换时更改活动切换锚点的样式

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

本文关键字：活动 样式 jquery      更新时间：2023-09-26

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

<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 时？然后当它不是时恢复正常？

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

在单击功能中添加活动类名

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

演示

试试这样： 工作小提琴

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

试试这个

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

定义要在突出显示类中应用的样式

相关文章：