Как изменить внешний вид якоря и сохранять его до тех пор, пока не будет нажата другая якорь - PullRequest
Новая
       23

Как изменить внешний вид якоря и сохранять его до тех пор, пока не будет нажата другая якорь

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

Что я хочу сделать, это изменить имя привязки «страница 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>

Я добавил скрипт, который я использую для переключения страниц, на случай, если некоторые значения могут быть использованы для изменения стиля клика по клику.Спасибо.

Ответы [ 2 ]

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

Не используйте функцию множественного включения, попробуйте это 

    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>
0 голосов
/ 19 сентября 2018

Вместо установки цвета в функции 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>
...