li标签子节点onclick的javascript代码

时间:2014-05-15 09:36:13

标签: javascript

部分内容:Javascript for li tag onclick location

li tag onclick的JavaScript代码:

关于span标记的Onclick问题。

如果我在span标记中使用单个类名称,JS下面的工作正常,但是如果在SPAN标记中使用多个类名(<span class="info navclass">Test</span>)onclick不起作用,因为“e.target.className”会在所有类中使用名。

我有什么办法可以做到这一点。

JS代码:

var changeLocation = function(id) {
  var _url = document.getElementsByClassName(id)[1].getAttribute('href');
  location.href = _url;   
}

document.getElementById("hd_vertical").addEventListener("click",function(e) {

        if(e.target.nodeName == "LI") { 
            var _anchor = e.target.id;
            changeLocation(_anchor);
        } else if(e.target.nodeName == "SPAN") {
            var _anchor = e.target.className;   
            changeLocation(_anchor);
        }
});

HTML code:

<div class="primaryNav fl">

 <ul id="hd_vertical" class="productNav">

    <li id="info" class="validation">
    <span class="info navclass">Test</span>
    <a class="info" href="http://validator.w3.org/">Test1</a>
    </li>

    <li id="learn" class="site">
    <span class="learn hdclass">fi</span>
    <a class="learn" href="http://www.w3schools.com/">Buses</a>
    </li>

  </ul>
</div>

Jsfiddle链接:

http://jsfiddle.net/sudheera/NgwS5/14/

1 个答案:

答案 0 :(得分:1)

您可以找到parentNode并获得所需的功能

,而不是上课

Demo Fiddle

Javascript

document.getElementById("hd_vertical").addEventListener("click",function(e) {
        if(e.target.nodeName == "LI") { 
            var _anchor = e.target.id;
            changeLocation(_anchor);
        } else if(e.target.nodeName == "SPAN") {
            var span = e.target;
            var li = span.parentNode;
            var _anchor = li.id;   
            changeLocation(_anchor);
    }
});  

希望它有所帮助......