使用 Jquery 单击链接时使链接变灰

Question

您好，我是 JQuery 的新手，并且已经想出了如何制作可以在单击链接时隐藏和显示的 div 列表。现在我希望当前点击的链接变灰。我非常不确定如何做到这一点。

我也是 slack 溢出的新手，所以如果我没有正确回答这个问题，请告诉我我没有发布足够的代码。

查询

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>

要切换的 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>

Answer 1

使用 $(this) 定位点击的链接。jQuery(function () {&nbsp; &nbsp; jQuery('#showall').click(function () {&nbsp; &nbsp; &nbsp; &nbsp; jQuery('.targetDiv').show();&nbsp; &nbsp; });&nbsp; &nbsp; jQuery('.showSingle').click(function () {&nbsp; &nbsp; &nbsp; &nbsp; jQuery('.targetDiv').hide();&nbsp; &nbsp; &nbsp; &nbsp; jQuery(this).addClass('className');&nbsp; &nbsp; &nbsp; &nbsp; jQuery('#div' + $(this).attr('target')).show();&nbsp; &nbsp; });});这样当一个链接被点击时类被添加。

Answer 2

下面的代码将文本颜色更改为灰色jQuery(function () {&nbsp; &nbsp; jQuery('#showall').click(function () {&nbsp; &nbsp; &nbsp; &nbsp; jQuery('.targetDiv').show();&nbsp; &nbsp; });&nbsp; &nbsp; jQuery('.showSingle').click(function () {&nbsp; &nbsp; &nbsp; &nbsp; jQuery('.targetDiv').hide();&nbsp; &nbsp; &nbsp; &nbsp; jQuery('#div' + $(this).attr('target')).show();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;jQuery('.showSingle').css("color", "#000");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; jQuery(this).css("color", "grey");&nbsp; &nbsp; });});

Answer 3

使用数据属性简单易行的方法$('.showSingle').click(function(e){e.preventDefault();let link_id = $(this).data('target');$('.targetDiv[data-target="'+link_id+'"]').toggle();}).targetDiv{&nbsp; background: red;&nbsp; height: 50px;&nbsp; width: 50px;&nbsp; display: inline-block;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><a href="" class="showSingle" data-target="1">Div1</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;<h1 class="title">Heading</h1>&nbsp; &nbsp;<a href="" class="showSingle" data-target="2">Div2</a>&nbsp; &nbsp;<a href="" class="showSingle" data-target="3">Div3</a>&nbsp; &nbsp;<a href="" class="showSingle" data-target="4">Div4</a>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;<div data-target="1" class="targetDiv" style="display:none">Div1</div>&nbsp; &nbsp;<div data-target="2" class="targetDiv" style="display:none">Div2</div>&nbsp; &nbsp;<div data-target="3" class="targetDiv" style="display:none">Div3</div>&nbsp; &nbsp;<div data-target="4" class="targetDiv" style="display:none">Div4</div>