Как изменить внешний вид якоря (текста), сравнив 2 id? - PullRequest
Новая
       24

Как изменить внешний вид якоря (текста), сравнив 2 id?

0 голосов
/ 21 сентября 2018

Я создаю стиль нумерации страниц для своего сайта.Он состоит из кода из 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>

Теперь я хотел бы отметить текущую страницу, которая отображается, изменив внешний вид ссылки.На данный момент он показывает «Pages: 1 2 3», и я хотел бы, чтобы он стал, например: «Pages: 1 [2] 3» (с другим цветом для помеченного «[2]».

Я нашел способы сделать это, но я не смог заставить его работать с кнопками «Далее» и «Предыдущий», которые при запуске не выделяли номер привязки.

В основном, если функция showPages возвращает «page2», якорь «2» с идентификатором «2» должен выглядеть так: [2].

Я думаю, это означает, что мне нужно сравнить идентификатор со страницыконтейнер, к id из части нумерации страниц ... Кто-нибудь знает, как я могу это сделать?

1 Ответ

0 голосов
/ 21 сентября 2018

То же, что вы прячете предыдущий блок и показываете новый блок.создайте класс 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>

Вот, пожалуйста ..

...