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

Question

我想做的是将锚点名称 "page 1" 更改为“[第 1 页]，同时更改 link 的颜色。我以某种方式设法更改了颜色，但它没有'如果我点击另一个锚点，就会变回来。

    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>

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

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>

Answer 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>

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

How to change an anchor appearance and keep it until an other anchor is clicked on

html

javascript

css

anchor

hyperlink