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

时间:2017-09-12 13:52:05

标签: javascript html css

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

&#13;
&#13;
com.foo.request.debug
&#13;
firebase.json
&#13;
&#13;
&#13;

6 个答案:

答案 0 :(得分:1)

这似乎是问题所在:

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

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

  1. 进一步钻取元素以获取子href元素的a,或
  2. 将点击处理程序添加到a元素
  3. 对于第一个选项,您可能会这样做:

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

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

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

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

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

答案 1 :(得分:1)

尝试

  1. a代码是li的子代,因此您需要使用querySelector来定位子元素
  2. 只需使用element.href获取href值
  3. 即可

    &#13;
    &#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;
    &#13;
    &#13;

答案 2 :(得分:1)

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

立即加载所有链接元素
navBarList[i].querySelectorAll("a");

为您提供所有内部链接。

答案 3 :(得分:1)

试试这个:

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属性之外,它几乎相同。

答案 4 :(得分:1)

不使用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'))
});

答案 5 :(得分:0)

请尝试此代码

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