基於 HTML-Element 的 Title-Attribute 為 DIV-Container 移除和添加 CSS-Class

Question

如果基於鏈接元素中的“標題屬性”在我的網站上單擊鏈接，我想 append 一個 CSS 類。

例如：如果我單擊標題為“Brand”的鏈接，它應該 append 在我的鏈接類上稱為“活動”的 CSS 類。 （導航鏈接主導航鏈接）

如果我單擊網站的另一個鏈接並導航到另一個類別，也應該刪除 CSS 類“活動”。

這將是最終的 output：

<a class="nav-link main-navigation-link active" href="#" itemprop="url" title="Brand">

這是我的 HTML 代碼：

<a class="nav-link main-navigation-link" href="#" itemprop="url" title="Brand">
   <div class="main-navigation-link-text">
      <span itemprop="name">Brand</span>
   </div>
</a>

如何僅使用“標題屬性”通過 JavaScript 添加 CSS 類？

預先感謝您的幫助！

Answer 1

這個問題已經回答了。

https://stackoverflow.com/a/46257053/9787555

您可以使用 .querySelector() 或 .querySelectorAll() 來查找節點並相應地刪除它們。

Answer 2

請看看這個。

HTML

<a class="nav-link main-navigation-link" href="#" itemprop="url" title="Brand" onclick="handleOnClick(this)">
   <div class="main-navigation-link-text">
      <span itemprop="name">Brand</span>
   </div>
</a>
<a class="nav-link main-navigation-link" href="#" itemprop="url" title="Product"  onclick="handleOnClick(this)">
   <div class="main-navigation-link-text">
      <span itemprop="name">Product</span>
   </div>
</a>
<a class="nav-link main-navigation-link" href="#" itemprop="url"  onclick="handleOnClick(this)">
   <div class="main-navigation-link-text">
      <span itemprop="name">No Title</span>
   </div>
</a>

JS

function handleOnClick(_this){
document.querySelectorAll('.main-navigation-link').forEach(link => {
    link.classList.remove('active');
    });
    if(_this.getAttribute('title') == "Brand"){
            _this.classList.add('active')
        }
}