Блог

Главная - Вопросы по программированию - Я хочу изменить класс гиперссылки при наведении курсора мыши на раздел, с которым она связана

Я хочу изменить класс гиперссылки при наведении курсора мыши на раздел, с которым она связана

#javascript #html #css

Вопрос:

Как я могу реализовать javascript для приведенного ниже кода, который добавляет class=»активный» в гиперссылку при переходе в раздел, т. Е. При переходе в раздел он должен добавить class=»активный» в раздел «О». А также, если я перейду в другой раздел, удалите класс=»активный» из предыдущего раздела и добавьте в текущий раздел.

 #s1 {
  display: flex;
  width: 100%;
  height: 500px;
  background: rgb(156, 78, 192);
  justify-content: center;
  align-items: center;
}

#s1 h1:hover {
  cursor: pointer;
  color: red;
}
#s2 {
  width: 100%;
  height: 500px;
  background: rgb(187, 82, 40);
}
#s3 {
  width: 100%;
  height: 500px;
  background: rgb(58, 56, 168);
}
#s4 {
  width: 100%;
  height: 500px;
  background: rgb(78, 54, 54);
  position: relative;
} 
 <div class="root">
  <div class="nav">
    <ul>
      <li><a href="#s1">Home</a></li>
      <li><a href="#s2">About</a></li>
      <li><a href="#s3">Contact</a></li>
      <li><a href="#s4">Project</a></li>
    </ul>
  </div>
  <section id="s1" id="top"><h1>hello</h1></section>
  <section id="s2"></section>
  <section id="s3"></section>
  <section id="s4">
    <a href="#top">goto top</a>
  </section>

Ответ №1:

Вы можете добавить прослушиватель событий к событиям щелчка в вашей навигации и добавить/удалить класс «активный» из <li тегов

 window.addEventListener('DomContentLoaded', () => { 
  // listen for the DOM to finish loading
  document.querySelectorAll('.nav li a').forEach(el => { 
  // get all the nav links together in a loop
    el.addEventListener('click', e => { 
    // listen for the click event on the nav item
      document.querySelectorAll('.nav li').forEach(li => li.classList.remove('active')); 
      // first remove all active classes from all navigation links
      e.target.closest('li').classList.add('active') 
      // apply active class to the chosen nav
    })
  })
}) 
 #s1 {
  display: flex;
  width: 100%;
  height: 500px;
  background: rgb(156, 78, 192);
  justify-content: center;
  align-items: center;
}

#s1 h1:hover {
  cursor: pointer;
  color: red;
}

#s2 {
  width: 100%;
  height: 500px;
  background: rgb(187, 82, 40);
}

#s3 {
  width: 100%;
  height: 500px;
  background: rgb(58, 56, 168);
}

#s4 {
  width: 100%;
  height: 500px;
  background: rgb(78, 54, 54);
  position: relative;
}

.active {
  background: #000;
}

.active a {
  color: #fff;
} 
 <div class="root">
  <div class="nav">
    <ul>
      <li><a href="#s1">Home</a></li>
      <li><a href="#s2">About</a></li>
      <li><a href="#s3">Contact</a></li>
      <li><a href="#s4">Project</a></li>
    </ul>
  </div>
  <section id="s1" id="top">
    <h1>hello</h1>
  </section>
  <section id="s2"></section>
  <section id="s3"></section>
  <section id="s4">
    <a href="#top">goto top</a>
  </section>
</div>

Комментарии:

1. спасибо за помощь!!. Но можете ли вы предоставить мне ссылку на прослушиватели событий js

2. Я добавил ссылку на ссылку и прокомментировал код в своем обновленном ответе. Прослушиватель событий делает именно это — он «прослушивает» событие. В этом коде прослушивается 2 события. Первый — это прослушивание DomContentLoaded события, которое происходит после загрузки HTML-кода страницы. Мы ждем этого, потому что без этого мы бы запускали код на HTML, который еще не был загружен. Второй прислушивается к «щелчку»

3. спасибо Кинглишу за помощь в этой проблеме.

Метки: ,