Question

我正在为我的网站构建类似书的分页样式。它由4个部分的代码组成：应该显示的文本，已编号的页面，“下一个”和“上一个”按钮以及用于确定要显示文本的哪个部分/页面的脚本。

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>

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

我已经找到了实现此目的的方法，但是我无法使其与“下一个”和“上一个”按钮一起使用，该按钮在触发时不会突出显示锚点编号。

基本上，如果函数showPages返回“ page2”，则标识为“ 2”的锚点“ 2”应显示为：[2]。

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

Answer 1

与隐藏上一个块并显示新块相同。用以下css创建一个css类：

.page:before{
  content: '['
}

.page:after{
  content: ']'
}

此CSS会将带有页面类的任何元素包装在方括号[]中。

现在将页面类别添加到所选页面并从较旧的页面中删除。

  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来更改锚点（文本）的外观？

1 个答案: