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

Question

我试图将onclick添加到列表项中，并使用纯JavaScript获得href。 我只有一个div才能工作，但是一旦添加列表项，我就无法使其工作。

 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.attributes['href'].value; GetFileDoc(pageURL, function (doc) { contentDiv.innerHTML = doc.getElementById("content").innerHTML; }); }); } } 

 <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> 

Answer 1

这似乎是问题所在：

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

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

1. 钻入元件进一步得到href孩子的a元素，或
2. 将点击处理程序添加到a元素中

对于第一种选择，您可以改为执行以下操作：

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

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

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

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

假设层次结构中没有其他您不想使用a元素。

Answer 2

试试看

1. a标签是在孩子li ，所以你需要使用querySelector为目标的子元素
2. 只需与element.href一起使用以获得href值

 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; // }); }); } } 

 <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> 

Answer 3

您正在将事件添加到列表中的每个li。 根据其余代码，特别是您希望已加载链接元素的行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;
               });
          });
      }
  }