以编程方式单击li元素

Click li element programmatically

本文关键字：li 元素 单击 方式 编程      更新时间：2023-09-26

我想在页面加载时单击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/

$(function() {
    $("li#f1").click(function() {
        alert("clicked:" + this.id);
    });
    $("li#f1").trigger("click");
});
https://jsfiddle.net/yz8owa76/

如果你有兴趣，可以通过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>

你不需要使用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>
相关文章：