部分:Javascript for li tag onclick location
li 标签 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 代码:
<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 链接:
最佳答案
您可以找到parentNode,而不是上课。并获得您想要的功能
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);
}
});
希望有帮助......
关于li标签子节点onclick的Javascript代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23674459/