如何通过比较 2 个 id 来改变锚点（文本）的外观？

Question

我正在为我的网站构建类似书籍的分页样式。它由 4 部分代码组成：应该显示的文本、页码、"next" 和 "previous" 按钮以及确定显示哪个 part/page 文本的脚本。

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

 
.pageHidden 
{
 display: none;
}

.pageDisplayed 
{
 display: block;
}

   
<div id="pageContainer">
 <div class="pageDisplayed" id="page1"><p>page 1 displayed</p></div>
 <div class="pageHidden" id="page2"><p>That is the second page.</p></div>
 <div class="pageHidden" id="page3"><p>And finally a third one.</p></div>

</div>



          <h2>pages : 
 <a href="#" id="1" onclick="showPages(1)">1</a>
 <a href="#" id="2" onclick="showPages(2)">2</a>
 <a href="#" id="3" onclick="showPages(3)">3</a>
          </h2>
    
      
      
    
<h2>
  <span style="float: left;">
    <a href="#" onclick="showPages(current - 1)">Previous</a>
  </span>

  <span style="float: right;">
    <a href="#" onclick="showPages(current + 1)">Next</a>
  </span>
</h2>

现在，我想通过更改 link 的外观来标记正在显示的实际页面。现在它显示 "Pages: 1 2 3" 我希望它成为，例如： "Pages: 1 [2] 3"（标记为“[2]”的颜色不同）。

我找到了方法，但我无法让它与 "next" 和 "previous" 按钮一起使用，这些按钮在触发时不会突出显示锚号。

基本上，如果函数 showPages returns "page2"，id 为“2”的锚点“2”应该如下所示：[2].

我认为这意味着我必须将页面容器中的 ID 与分页部分中的 ID 进行比较...有人知道我该怎么做吗？

Answer 1

与您隐藏上一个块并显示新块相同。使用以下 css:

创建一个 css class

.page:before{
  content: '['
}

.page:after{
  content: ']'
}

此css 将用括号[].

包装第class 页的任何元素

现在将页面 class 添加到所选页面并从旧页面中删除。

  pageNum = document.getElementById("" + id);
  pageNum.classList.add("page")

  pageNum = document.getElementById("" + current);
  pageNum.classList.remove("page")

这是您的工作代码。

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");

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

.pageHidden 
{
 display: none;
}

.pageDisplayed 
{
 display: block;
}

.page:before{
  content: '['
}

.page:after{
  content: ']'
}

<div id="pageContainer">
 <div class="pageDisplayed" id="page1"><p>page 1 displayed</p></div>
 <div class="pageHidden" id="page2"><p>That is the second page.</p></div>
 <div class="pageHidden" id="page3"><p>And finally a third one.</p></div>

</div>



          <h2>pages : 
 <a href="#" class="page" id="1" onclick="showPages(1)">1</a>
 <a href="#" id="2" onclick="showPages(2)">2</a>
 <a href="#" id="3" onclick="showPages(3)">3</a>
          </h2>
    
      
      
    
<h2>
  <span style="float: left;">
    <a href="#" onclick="showPages(current - 1)">Previous</a>
  </span>

  <span style="float: right;">
    <a href="#" onclick="showPages(current + 1)">Next</a>
  </span>
</h2>

给你..

如何通过比较 2 个 id 来改变锚点（文本）的外观？

How to change the appearance of an anchor (text) by comparing 2 id?

html

css

anchor

jquery