Как выделить все ссылки внутри элемента nav

Question

У меня есть страница со многими ссылками, но я хочу использовать js, выбрать все ссылки внутри тега nav и назначить их переменной с именем navigationLinks. Есть ли способ сделать это, не назначая класс всем ссылкам. `

<nav>
    <ul>
      <li><a href="index.html" class="selected">Portfolio</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>

Вот js:

let navigationLinks = document.getElementsByTagName('nav');

Спасибо.

javascript

3

martinbshp 11 Дек 2016 в 13:11

Answer 1

let navigationLinks = document.querySelectorAll('nav a');

Но помните, что это объект NodeList.

8

KubaJastrz 11 Дек 2016 в 10:19

Answer 2

Ваш данный JavaScript:

let navigationLinks = document.getElementsByTagName('nav');

Неправильно, используйте [0] после document.getElementsByTagName('nav'), чтобы выбрать первый навигационный элемент.

Используйте этот код, чтобы назначить класс my-class для каждой ссылки <a> внутри nav

let navigationLinks = document.getElementsByTagName('nav')[0];
let button = document.getElementsByTagName('button')[0];

var ul = navigationLinks.children[0];
var ulChilds = ul.children;
function insertClass() {
    for (var x=0;x < ulChilds.length;x++) {
        ulChilds[x].className += ' my-class';
    }
}
button.onclick = insertClass;

.my-class {
    background: yellow; /*Just testing class*/
}

<nav>
    <ul>
      <li><a href="index.html" class="selected">Portfolio</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>
<button>Add my-class</button>

Надеюсь, тебе это нужно.

0

Naman 11 Дек 2016 в 10:21

Answer 3

let navElement = document.getElementsByTagName('NAV');

let navigationLinks = navElement[0].getElementsByTagName('A');

Если у вас есть несколько навигационных тегов, вам может понадобиться зациклить их

0

w.Bala 11 Дек 2016 в 10:26

Как выделить все ссылки внутри элемента nav

3 ответа

Похожие вопросы

Новые вопросы

javascript