用于li标记onclick位置的Javascript [英] Javascript for li tag onclick location

问题描述

li tag onclick的javascript代码，

Javascript code for li tag onclick,

我使用下面的代码，但无法覆盖span标记onclick。

Am using below code but am not able to cover span tag onclick.

HTML：

<div class="primaryNav fl">

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

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

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

  </ul>
</div>

JS：

document.getElementById("hd_vertical").addEventListener("click",function(e) {
    if(e.target && e.target.nodeName == "LI") {
        var _anchor = e.target.id;
        var _url = document.getElementsByClassName(_anchor)[1].getAttribute('href');
        location.href = _url;
    }
});

jsfiddle：

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

我有li标签onclick的jquery代码，我尝试在Javascript中做同样的事情。

I have jquery code for li tag onclick,Am trying do same thing in Javascript.

请建议我!!

推荐答案

由于您的支票仅针对 LI 编写，因此不会在if语句中包含其他代码。你也必须处理另一个。所以对于 SPAN 标记你可以这样做：

Since your check is written for LI only, it would not go inside the if statement for the other tags. You would have to handle the other also. so for SPAN tag you can do :

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

document.getElementById("hd_vertical").addEventListener("click",function(e) {
    var _anchor = ""; 
    if(e.target) {
        // checc which tag is clicked.
        alert("tag is :" + e.target.nodeName);

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

Jsfiddle： span-tag-working

Jsfiddle : span-tag-working

这篇关于用于li标记onclick位置的Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！