ul中获取当前点击的li的值

最新推荐文章于 2023-10-26 14:03:34 发布

原创最新推荐文章于 2023-10-26 14:03:34 发布 · 4.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#ul #选中的li的值 #当前点击的li #jsp

这篇博客介绍如何在HTML中通过JS实现当点击ul列表时获取当前选中li的值。当li被点击时，添加active类并移除其他li的active类，同时将li的值保存到隐藏input字段，以便后续业务处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码：

<ul class="chooseUl">
<li id="a1" class="chooseBtn active">最新课程</li>
<li id="a2" class="chooseBtn">Java基础</li>
<li id="a3" class="chooseBtn">数据库基础</li>

</ul>

</div>

JS代码：

<script rel="script">

$(".chooseUl").children("li").click(function(e){
var chooseId = e.currentTarget.id;
$(this).addClass("active").siblings("li").removeClass("active");
chooseBox(chooseId);
var a = $(this).text();//点击时当前li的值

alert(a);

if(a=="最新课程"){
$("#courseType").val("");//点击后当前li的值通过放到隐藏作用域里
}else{
$("#courseType").val(a);
}
var courseName = $("#search").val();
var trainerPhone = $("#courseType").val();
$.post("<%=basePath%>index/showIndex3",{"courseName":courseName,"trainerPhone":trainerPhone},function(data){
an(data);
});蓝色部分为项目中的部分业务逻辑可忽略

});