Question

我想要做的是在更改链接颜色的同时将锚点名称“第1页”更改为“ [第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>

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

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功能

[a-z]

    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;
    }

如何更改锚点外观并保持其外观，直到单击其他锚点为止

2 个答案: