以编程方式单击 li 元素

Question

我想在页面加载时单击 li 标签，但它不起作用。 HTML：

 <div id="listDiv">
    <ul id="listUL" class="listUL">
        <li id="f1" class="listDynamic">Term1</li>
        <li id="f2" class="listDynamic">Term2</li>
        <li id="f3" class="listDynamic" >Term3</li>  
    </ul>   
</div>     

JavaScript：

$("#listUL").find("li#f1").click(function() {
                alert("clicked:" + this.id);
            });
$("#listUL").find("li#f1").trigger("click");

/*
 I also tried 
 $( document ).ready(function() {
    $("#listUL").find("li#f1").trigger("click");
});

*/

http://jsfiddle.net/hx20d87m/4/

Answer 1

$(function() {
    $("li#f1").click(function() {
        alert("clicked:" + this.id);
    });

    $("li#f1").trigger("click");
});

https://jsfiddle.net/yz8owa76/

Answer 2

如果您有兴趣通过Javascript进行：

 var list = document.getElementById("listUL"); function Alert(){ console.log(this.id); alert(this.id); } console.log(list); for(i=0;i<=list.childElementCount-1;i++){ list.children[i].addEventListener("click",Alert); } 

 <div id="listDiv"> <ul id="listUL" class="listUL"> <li id="f1" class="listDynamic">Term1</li> <li id="f2" class="listDynamic">Term2</li> <li id="f3" class="listDynamic" >Term3</li> </ul> </div> 

Answer 3

您可以不需要使用 javascript。 你可以在你的 css 中这样做

li {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

在 li 标签中，您可以像这样使用onclick属性，然后导航到您要在location.href转到的文件/页面

<div id="listDiv">
    <ul id="listUL" class="listUL">
        <li id="f1" class="listDynamic" onclick="location.href=`....`;">Term1</li>
        <li id="f2" class="listDynamic" onclick="location.href=`....`;">Term2</li>
        <li id="f3" class="listDynamic" onclick="location.href=`....`;">Term3</li>  
    </ul>   
</div>