2

Есть решение на jQuery

jQuery(document).ready(function(){

    $(function() {
    $("nav div a").click(function() {
    $(this).toggleClass("checked");
        })
    });
    });

Нужно тоже самое, только на чистом js. Вот мои соображения :

window.onload = function() {
var container = document.getElementById("nav");
var hrefs = container.getElementsByTagName("a");
hrefs = function () {
for (var i in hrefs){
    hrefs[i].addEventListener('onclick', function() {
        if(hrefs.classList.contains("checked")){
            hrefs[i].classList.toggle("checked")
        }else{
            hrefs[i].classList.add("checked")
        }
    });
    }
}

};

Запутался. Помогите!

1
  • Замените hrefs[i] на this внутри обработчика
    – Darth
    27 янв 2016 в 23:54

2 ответа 2

5

window.addEventListener('DOMContentLoaded', function() {
  var nodes = document.querySelectorAll('nav div a');

  [].forEach.call(nodes, function(a) {
    a.addEventListener('click', function(event) {
      event.preventDefault()
      a.classList.toggle("checked")
    });

  });
});
.checked {
  background-color: #0000CD;
  color: #FFFFFF;
}
a {
  margin: 5px;
}
<nav>
  <div>
    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">7</a>
  </div>
</nav>

window.addEventListener("DOMContentLoaded", function() {
    var nodes = document.querySelectorAll("nav div a");
    [].forEach.call(nodes, function(a) {
        a.addEventListener("click", function(event) {
            event.preventDefault();
            [].forEach.call(nodes, function(b) {
                b.classList[["add", "remove"][+(a.classList.contains("checked") || a != b)]]("checked")
            })
        })
    })
});

вариант для выбора и смены 1 элемента, для выбора 1 элемента без смены уберите a.classList.contains("checked") || для выбора и смены любого элемента смотрите выше вариант с примером

2
  • А как ,собственно, "затирать" уже имеющийся в списке класс checked ?
    – 7even
    28 янв 2016 в 1:52
  • @7even добавил пару вариантов в ответ выше
    – рони
    28 янв 2016 в 5:17
0
window.addEventListener('DOMContentLoaded', function() {
  var nodes = document.querySelectorAll('nav div a');

  [].forEach.call(nodes, function(a) {
    a.addEventListener('click', function(event) {
      event.preventDefault()
      a.classList.toggle("checked")
    });

  });
});

@рони Ответ хороший, но я сломал голову , потому как не могу класс "checked" присвоить в main -> aside -> p. Получается что в хэдере 2 кнопки со своими id, по нажатию которых, открывается содержимой в main -> aside -> p (элементов p два и каждый должен открываться в только от "своей" кнопки)

1
  • 1
    Это не ответ. Используйте возможность правки своего вопроса или задайте новый. 15 фев 2016 в 6:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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