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 that you have read and understand our privacy policy and code of conduct.

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