Question

我试图在我的列表项中添加onclick并使用纯JavaScript获取href。我只是在div中工作，但是一旦我添加了列表项，我就无法让它工作。

＆＃13;

com.foo.request.debug

＆＃13;

firebase.json

＆＃13;

Answer 1

这似乎是问题所在：

var pageURL = this.attributes['href'].value;

您将点击处理程序添加到li元素，而不是a元素。所以没有href属性。我想有两种选择：

进一步钻取元素以获取子href元素的a，或
将点击处理程序添加到a元素

对于第一个选项，您可能会这样做：

var pageURL = this.getElementsByTagName("a")[0].attributes['href'].value;

您当然希望进行一些错误检查，除非您非常确信总会有您想要的第一个a元素。

对于第二个选项，您可能只是修改您正在循环的内容。也许是这样的：

var navBarItems = navBarList[i].getElementsByTagName("a");

假设层次结构中没有其他a元素，您不想将其用于此目的。

Answer 2

尝试

a代码是li的子代，因此您需要使用querySelector来定位子元素
只需使用element.href获取href值

＆＃13;

var navBarDiv = document.getElementById("navbar");
var contentDiv = document.getElementById("content");

var navBarList = navBarDiv.getElementsByTagName("ul");

for (var i = 0; i < navBarList.length; i++) {

  var navBarItems = navBarList[i].getElementsByTagName("li");
  for (var j = 0; j < navBarItems.length; j++) {

    navBarItems[j].addEventListener('click', function(e) {
      e.preventDefault();
      var pageURL = this.querySelector('a').href;
      console.log(pageURL)
      //GetFileDoc(pageURL, function(doc) {
        //contentDiv.innerHTML = doc.getElementById("content").innerHTML;
     // });
    });
  }
}

＆＃13;

<div id="navbar">
  <ul>
    <li><a href="\" class="active">Homepage</a></li>
    <li><a href="pages/about.html">About Us</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="pages/contact.html">Contact Us</a></li>
  </ul>
</div>

＆＃13;

Answer 3

您正在为列表中的每个li添加事件。根据代码的其余部分，espscialy你希望加载链接元素的行this.attributes['href'].value。您可以使用

立即加载所有链接元素

navBarList[i].querySelectorAll("a");

为您提供所有内部链接。

Answer 4

试试这个：

var navBarDiv = document.getElementById("navbar");
var contentDiv = document.getElementById("content");

var navBarLinks = navBarDiv.getElementsByTagName("a");

// Attach click listeners for each of the nav links.
for (var i = 0; i < navBarLinks.length; i++) {


    navBarLinks[i].addEventListener('click', function (e) {
        e.preventDefault();

        var pageURL = this.attributes['href'].value;

        GetFileDoc(pageURL, function (doc) {
            contentDiv.innerHTML = doc.getElementById("content").innerHTML;
        });
    });
}

}

除了我直接过滤到锚标签然后有一个href属性之外，它几乎相同。

Answer 5

不使用ES6

Array.prototype.slice.call(document.querySelectorAll('#navbar ul li a')).map(function(item) {
 item.addEventListener('click', function(e) {
 e.preventDefault();
 console.log("href", e.target.href);
 });
});

<div id="navbar">
    <ul>
        <li><a href="\" class="active">Homepage</a></li>
        <li><a href="pages/about.html">About Us</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="pages/contact.html">Contact Us</a></li>
    </ul>
</div>

使用ES6

[...document.querySelectorAll('#navbar ul li a')]
.map((item) => {
 item.addEventListener('click', (e) => {
 e.preventDefault();
 console.log("href", e.target.href);
 });
});

<div id="navbar">
    <ul>
        <li><a href="\" class="active">Homepage</a></li>
        <li><a href="pages/about.html">About Us</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="pages/contact.html">Contact Us</a></li>
    </ul>
</div>

的jQuery

jQuery('#navbar ul li').click(function() {
console.log("href", $(this).attr('href'))
});

Answer 6

请尝试此代码

  var navBarDiv = document.getElementById("navbar");
  var contentDiv = document.getElementById("content");

  var navBarList = navBarDiv.getElementsByTagName("ul");

  // Attach click listeners for each of the nav links.
  for (var i = 0; i < navBarList.length; i++) {

      var navBarItems = navBarList[i].getElementsByTagName("li");
      for (var j = 0; j < navBarItems.length; j++) {

          navBarItems[j].addEventListener('click', function (e) {
              e.preventDefault();
                        var pageURL = this.getElementsByTagName('a')[0].href;
              alert(pageURL);
               GetFileDoc(pageURL, function (doc) {
                 contentDiv.innerHTML = doc.getElementById("content").innerHTML;
               });
          });
      }
  }

<ul> <li>列出添加onclick的项目

6 个答案: