javascript - 如何更改 anchor 外观并保持它直到单击另一个 anchor

Question

我想做的是将 anchor 名称“第 1 页”更改为“[第 1 页]”，同时更改链接的颜色。我以某种方式设法更改了颜色，但如果我单击它不会变回在另一个 anchor 上。

    var current = 1;
    var totalPages = document.getElementById("pageContainer").childElementCount;


    function showPages(id = 1) {
      if (id < 1 || id > totalPages) 
        return;
      curr_page = document.getElementById("page" + current);
      curr_page.classList.add("pageHidden");
      curr_page.classList.remove("pageDisplayed");

      target_page = document.getElementById("page" + id);
      target_page.classList.add("pageDisplayed");
      target_page.classList.remove("pageHidden");
      current = id;
    }

         
    
    <div id="pageContainer">
      <div class="pageDisplayed" id="page1">
        <p>blah blah</p>
      </div>
      <div class="pageHidden" id="page2">
        <p>blah blah on a second page</p>
      </div>
      <div class="pageHidden" id="page3">
        <p>blah blah on a third page</p>
      </div>
    </div>     
         
         
         <h2 id="main">pages : 
  <a href="#" onclick="this.style.color='red';" onclick="showPages('1')">1</a>
  <a href="#" onclick="this.style.color='red';" onclick="showPages('2')">2</a>
  <a href="#" onclick="this.style.color='red';" onclick="showPages('3')">3</a>
          </h2>

            
           

我添加了用于切换页面的脚本，以防某些值可用于更改单击的 anchor 的样式。谢谢。

Answer 1

与其在 onclick 函数中设置颜色，不如运行函数来检查所有链接并根据单击的元素设置颜色(或类名)。

function toggleColor(elem) {
  var anchors = document.querySelectorAll(".nav-link");
  anchors.forEach(function(anchor) {
    if(anchor === elem) {
      anchor.style.color = 'red'
    } else {
      anchor.style.color = ''
    }
  })
}

<a href="#" class="nav-link" onclick="toggleColor(this)" onclick="showPages('1')">1</a>
<a href="#" class="nav-link" onclick="toggleColor(this)" onclick="showPages('2')">2</a>
<a href="#" class="nav-link" onclick="toggleColor(this)" onclick="showPages('3')">3</a>