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

Question

Hello I am new to JQuery and have figured out how to make a list of divs that can be hidden and shown when a link is clicked. Now I would like the link that is currently clicked on to be grayed out. I am very unsure of how to do this.
I am also new to slack overflow so if I did not this question right please let me know of I did not post enough of my code.

Jquery

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

Link Menu

 <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>

Divs To Be Toggled

         <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

Use $(this) to target the clicked link.

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();
    });
});

In this way when a link is clicked class is added.

Answer 2

The below code changes the text color to 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");
    });

});

Answer 3

simple and easy way to do it with data attribute

 $('.showSingle').click(function(e){ e.preventDefault(); let link_id = $(this).data('target'); $('.targetDiv[data-target="'+link_id+'"]').toggle(); })

 .targetDiv{ background: red; height: 50px; width: 50px; 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> <h1 class="title">Heading</h1> <a href="" class="showSingle" data-target="2">Div2</a> <a href="" class="showSingle" data-target="3">Div3</a> <a href="" class="showSingle" data-target="4">Div4</a> <div data-target="1" class="targetDiv" style="display:none">Div1</div> <div data-target="2" class="targetDiv" style="display:none">Div2</div> <div data-target="3" class="targetDiv" style="display:none">Div3</div> <div data-target="4" class="targetDiv" style="display:none">Div4</div>

Answer 4

You can add/remove a CSS class to the element that is clicked.

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');
    });
});

And this is the CSS:
.selected { color: gray; }

Remember to always add role="button" when using non-button elements as buttons (you're doing this by altering that default behavior of the anchor tags ). Better yet, you could use actual buttons to achieve the same effect. This is important for accessibility purposes (ADA, screen readers). It is also a best-practice to use semantic HTML whenever possible.

<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>