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

         <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 () {
    jQuery('#showall').click(function () {
        jQuery('.targetDiv').show();
    });
    jQuery('.showSingle').click(function () {
        jQuery('.targetDiv').hide();
        jQuery(this).addClass('className');
        jQuery('#div' + $(this).attr('target')).show();
    });
});

這樣，當點擊鏈接時，class 就會被添加。

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

您可以將 CSS class 添加/刪除到單擊的元素。

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>