如何更改锚点外观并保留它直到单击另一个锚点答案

【问题标题】：How to change an anchor appearance and keep it until an other anchor is clicked on如何更改锚点外观并保留它直到单击另一个锚点
【发布时间】：2019-02-23 13:25:22
【问题描述】：

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

    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>

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

【问题讨论】：

也发布你的HTML
我添加了 html。虽然很简单。
w3schools.com/cssref/sel_active.asp
你说你点击了一些锚标签，但我没有看到任何锚标签？一般来说，您的问题并不清楚，您介意解释一下吗？
":active" 被点击时触发。发布时它不再着色。抱歉，我在编辑时误删除了锚点。

标签： javascript html css hyperlink anchor

【解决方案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>

【讨论】：

结果和我的代码一样。当您单击其他链接时，它不会反转为原始颜色。
@Braisque 我将代码示例编辑为 sn-p 以便您可以看到它正在工作

【解决方案2】：

不要使用多个 onclick 功能试试这个

    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="showPages('1');this.style.color='red';">1</a>
              <a href="#" onclick="showPages('2');this.style.color='red';">2</a>
              <a href="#" onclick="showPages('3');this.style.color='red';">3</a>
          </h2>

【讨论】：

它也有效。但结果还是一样。一旦点击，链接就不会变回原来的颜色。