Javascript 使用Jquery单击链接时将其灰显

您好，我是JQuery的新手，已经了解了如何创建一个div列表，单击链接时可以隐藏和显示这些div。现在我希望当前单击的链接变灰。我很不确定如何做到这一点。
我也是slack overflow的新手，所以如果我没有正确回答这个问题，请让我知道我没有发布足够的代码

Jquery

jQuery(function () {
    jQuery('#showall').click(function () {
        jQuery('.targetDiv').show();
    });
    jQuery('.showSingle').click(function () {
        jQuery('.targetDiv').hide();
        jQuery('#div' + $(this).attr('target')).show();
    });
});

链接菜单

 <a class="showSingle" target="1">Div1</a>           
   <h1 class="title">Heading</h1>
   <a class="showSingle" target="2">Div2</a>
   <a class="showSingle" target="3">Div3</a>
   <a class="showSingle" target="4">Div4</a>

Div1
标题
第二组
第三组
第四组

要切换的div

         <div id="div2" class="targetDiv" style="display:none">Div2</div>
         <div id="div3" class="targetDiv" style="display:none">Div3</div>
         <div id="div4" class="targetDiv" style="display:none">Div4</div>

Div2
第三组
第四组

使用$（this）以单击的链接为目标

jQuery(function () {
    jQuery('#showall').click(function () {
        jQuery('.targetDiv').show();
    });
    jQuery('.showSingle').click(function () {
        jQuery('.targetDiv').hide();
        jQuery(this).addClass('className');
        jQuery('#div' + $(this).attr('target')).show();
    });
});

这样，当单击链接时，将添加类。

使用$（this）以单击的链接为目标

jQuery(function () {
    jQuery('#showall').click(function () {
        jQuery('.targetDiv').show();
    });
    jQuery('.showSingle').click(function () {
        jQuery('.targetDiv').hide();
        jQuery(this).addClass('className');
        jQuery('#div' + $(this).attr('target')).show();
    });
});

---

这样，当单击链接时，将添加类。

下面的代码将文本颜色更改为灰色

jQuery(function () {
    jQuery('#showall').click(function () {
        jQuery('.targetDiv').show();
    });
    jQuery('.showSingle').click(function () {
        jQuery('.targetDiv').hide();
        jQuery('#div' + $(this).attr('target')).show();
         jQuery('.showSingle').css("color", "#000");
          jQuery(this).css("color", "grey");
    });

});

---

下面的代码将文本颜色更改为灰色

jQuery(function () {
    jQuery('#showall').click(function () {
        jQuery('.targetDiv').show();
    });
    jQuery('.showSingle').click(function () {
        jQuery('.targetDiv').hide();
        jQuery('#div' + $(this).attr('target')).show();
         jQuery('.showSingle').css("color", "#000");
          jQuery(this).css("color", "grey");
    });

});

---

使用数据属性执行此操作的简单方法

$（'.showSingle'）。单击（函数（e）{
e、 预防默认值（）；
让link_id=$（this.data（'target'）；
$（'.targetDiv[data target=“'+link_id+''“]）。toggle（）；
})

.targetDiv{
背景：红色；
高度：50px；
宽度：50px；
显示：内联块；
}

标题
第一组
第二组
第三组
Div4

使用数据属性执行此操作的简单方法

$（'.showSingle'）。单击（函数（e）{
e、 预防默认值（）；
让link_id=$（this.data（'target'）；
$（'.targetDiv[data target=“'+link_id+''“]）。toggle（）；
})

.targetDiv{
背景：红色；
高度：50px；
宽度：50px；
显示：内联块；
}

标题
第一组
第二组
第三组
Div4

您可以向单击的元素添加/删除CSS类

jQuery(function () {
    jQuery('#showall').click(function () {
        jQuery('.targetDiv').show();
    });
    jQuery('.showSingle').click(function () {
        jQuery('.selected').removeClass('selected');
        jQuery('.targetDiv').hide();
        jQuery('#div' + $(this).attr('target')).show();
        jQuery(this).addClass('selected');
    });
});

这是CSS:

。所选{颜色：灰色；}

当使用非按钮元素作为按钮时，请记住始终添加

role=“button”

（通过更改锚定标记的默认行为来实现）。更好的是，您可以使用实际的按钮来实现相同的效果。这对于可访问性目的（ADA、屏幕阅读器）非常重要。尽可能使用语义HTML也是一种最佳实践

<script>
    jQuery(function () {
        jQuery('#showall').click(function () {
            jQuery('.targetDiv').show();
        });
        jQuery('.showSingle').click(function () {
            jQuery('[disabled=true]').prop('disabled', false);
            jQuery('.targetDiv').hide();
            jQuery('#div' + $(this).attr('target')).show();
            jQuery(this).prop('disabled', false);
        });
    });
</script>

<button class="showSingle" target="1">Div1</button>
<h1 class="title">Heading</h1>
<button class="showSingle" target="2">Div2</button>
<button class="showSingle" target="3">Div3</button>
<button class="showSingle" target="4">Div4</button>
<div id="div2" class="targetDiv" style="display:none">Div2</div>
<div id="div3" class="targetDiv" style="display:none">Div3</div>
<div id="div4" class="targetDiv" style="display:none">Div4</div>  

jQuery（函数（）{
jQuery（'#showall'）。单击（函数（）{
jQuery（'.targetDiv'）.show（）；
});
jQuery（'.showSingle'）。单击（函数（）{
jQuery（'[disabled=true]'）。prop（'disabled'，false）；
jQuery（'.targetDiv'）.hide（）；
jQuery（'#div'+$（this.attr（'target'））.show（）；
jQuery（this）.prop（'disabled'，false）；
});
});
第一组
标题
第二组
第三组
第四组
第二组
第三组
第四组

您可以向单击的元素添加/删除CSS类

jQuery(function () {
    jQuery('#showall').click(function () {
        jQuery('.targetDiv').show();
    });
    jQuery('.showSingle').click(function () {
        jQuery('.selected').removeClass('selected');
        jQuery('.targetDiv').hide();
        jQuery('#div' + $(this).attr('target')).show();
        jQuery(this).addClass('selected');
    });
});

这是CSS:

。所选{颜色：灰色；}

当使用非按钮元素作为按钮时，请记住始终添加

role=“button”

（通过更改锚定标记的默认行为来实现）。更好的是，您可以使用实际的按钮来实现相同的效果。这对于可访问性目的（ADA、屏幕阅读器）非常重要。尽可能使用语义HTML也是一种最佳实践

<script>
    jQuery(function () {
        jQuery('#showall').click(function () {
            jQuery('.targetDiv').show();
        });
        jQuery('.showSingle').click(function () {
            jQuery('[disabled=true]').prop('disabled', false);
            jQuery('.targetDiv').hide();
            jQuery('#div' + $(this).attr('target')).show();
            jQuery(this).prop('disabled', false);
        });
    });
</script>

<button class="showSingle" target="1">Div1</button>
<h1 class="title">Heading</h1>
<button class="showSingle" target="2">Div2</button>
<button class="showSingle" target="3">Div3</button>
<button class="showSingle" target="4">Div4</button>
<div id="div2" class="targetDiv" style="display:none">Div2</div>
<div id="div3" class="targetDiv" style="display:none">Div3</div>
<div id="div4" class="targetDiv" style="display:none">Div4</div>  

jQuery（函数（）{
jQuery（'#showall'）。单击（函数（）{
jQuery（'.targetDiv'）.show（）；
});
jQuery（'.showSingle'）。单击（函数（）{
jQuery（'[disabled=true]'）。prop（'disabled'，false）；
jQuery（'.targetDiv'）.hide（）；
jQuery（'#div'+$（this.attr（'target'））.show（）；
jQuery（this）.prop（'disabled'，false）；
});
});
第一组
标题
第二组
第三组
第四组
第二组
第三组
第四组

不清楚您想要实现的目标。你说的“出去”到底是什么意思？请尽量用清楚的陈述来解释你的目标。记住：我们无法了解你的想法。不清楚你想要实现什么。你说的“出去”到底是什么意思？请尽量用清楚的陈述来解释你的目标。记住：我们无法读懂你的心思。