Question

所以我想使用Javascript将三个不同的href链接添加到3类中。

但是我不能真正使其正常工作。我为我的简短解释和英语不好而感到抱歉，但我真的不知道该如何更好地解释它。

我已经在谷歌上寻找解决方案，但是我只能在不使用课程的情况下才能找到解决方法。

HTML

<li class="navigation">HTML</li>
                <li class="navigation">DOM</li>
                <li class="navigation">Javascript</li>
            </ul>

JS

var links = document.getElementsByClassName("navigation");
  links[0].setAttribute('href', 'www.google.se');

我想上一个名为Navigation的类，并为

添加href链接。

Answer 1

li元素没有href属性。这是一个列表项，而不是锚点。

您可以使用document.createElement创建一个a元素，然后将列表项内的文本节点移入其中，然后将a元素附加到li元素，然后向其中添加一个href属性。

const listitems = document.querySelectorAll('li');

Object.values(listitems).forEach(item => {
  const text = item.firstChild;
  const link = document.createElement('a');
  link.setAttribute("href", "http://google.com");
  item.appendChild(link);
  link.appendChild(text);
});

<ul>
  <li class="navigation">HTML</li>
  <li class="navigation">DOM</li>
  <li class="navigation">Javascript</li>
</ul>

Answer 2

li文字没有点击效果，因此您添加了链接标签<a></a>

var links = document.getElementsByClassName("navigation");

links[0].setAttribute('href', 'www.google.se'); //edit the url
links[1].setAttribute('href', 'www.google.se');
links[2].setAttribute('href', 'www.google.se');

<ul>  
  <li ><a class="navigation">HTML</a></li>
  <li ><a class="navigation">DOM</a></li>
  <li ><a class="navigation">Javascript<a/></li>
</ul>

Answer 3

getUser()

var link1 = document.getElementsByClassName("navigation1");
var link2 = document.getElementsByClassName("navigation2");
var link3 = document.getElementsByClassName("navigation3");

link1[0].setAttribute('href', 'www.google.com');
link2[0].setAttribute('href', 'www.yahoo.com');
link3[0].setAttribute('href', 'www.test.com');

分别将href附加到课程

3 个答案: