Выделение ссылки при щелчке по ней с помощью Jquery

Question

Здравствуйте. Я новичок в JQuery и выяснил, как составить список элементов div, которые можно скрыть и показать при нажатии на ссылку. Теперь я бы хотел, чтобы ссылка, по которой сейчас щелкнули, была недоступна. Я очень не уверен, как это сделать.
Я также новичок в слабом переполнении, поэтому, если я не правильно ответил на этот вопрос, пожалуйста, дайте мне знать, что я не выложил достаточно своего кода.

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>

Дивы, которые нужно переключить

         <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

Вы можете добавить / удалить класс 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:
.selected { color: gray; }

Не забывайте всегда добавлять 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>  

Answer 2

Код ниже меняет цвет текста на серый

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

простой и легкий способ сделать это с помощью атрибута данных

$('.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

Используйте $ (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();
    });
});

Таким образом, при нажатии на ссылку добавляется класс.