1

Для кнопок создал javascrit активный класс но код сробатывает неправильно .Цвет кнопки меняется через две нажатие и иногда вабше неменяется . Можете подсказать ошибку .Заранее спасибо

<div class="navigation">
  <a href="#" class="link active" onclick="activeFunction()">Link</a>
  <a href="#" class="link"  onclick="activeFunction()">Link</a>
  <a href="#" class="link"  onclick="activeFunction()">Link</a>
</div>

<style>

.navigation{
  width:100%;
  display:inline-block;
  text-align:center;
}

.link{
   display:block;
   padding:1em 0 1em 0;
   margin:0.5em;
   background-color:yellow;
}

.active{
   background-color:green;
}



</style>

    <script>

    function activeFunction(){

    var link,i;

    link =document.getElementsByClassName("link");

    for (var i = 0; i < link.length; i++) {
      link[i].addEventListener("click", function() {
        var current = document.getElementsByClassName("active");
        current[0].className = current[0].className.replace("active", "" );
        this.className += "active";
      });
    }

    }
    </script>

1 ответ 1

0

Не работает активная кнопка для навигации javascript

Вот вариант при котором цвет меняется как надо

function activeFunction(e) {
  // Если неактивный элемент 
  if (!e.target.className.includes('active')) {
    // Взять элемент с классом active
    let a = document.querySelector('.active')
    // Убрать класс active
    a.className = a.className.replace('active', '')
    // Добавить класс active в нажатый элемент
    e.target.className += ' active'
  }
}
.navigation {
  width: 100%;
  display: inline-block;
  text-align: center;
}

.link {
  display: block;
  padding: 1em 0 1em 0;
  margin: 0.5em;
  background-color: yellow;
}

.active {
  background-color: green;
}
<div class="navigation">
  <a href="#" class="link active" onclick="activeFunction(event)">Link</a>
  <a href="#" class="link" onclick="activeFunction(event)">Link</a>
  <a href="#" class="link" onclick="activeFunction(event)">Link</a>
</div>

1
  • Спасибо вам. Очень помогли 22 июл 2018 в 10:40

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.