js点击ul中某个li标签,改变这个li标签的背景图,当点击其它li标签时前一个被点击的标签背景

恢复,当前点击的标签的背景图改变... 恢复,当前点击的标签的背景图改变 展开
 我来答
百度网友faadf46
高粉答主

2020-05-05 · 说的都是干货,快来关注
知道答主
回答量:4556
采纳率:0%
帮助的人:74.2万
展开全部

1、新建一个html文件,命名为test.html。

2、在test.html文件内,使用ul和li标签创建一个列表,li的值分别为测试a,测试b。

3、在test.html文件内,设置第一个li标签的id为mytest,主要用于下面通过该id获得li对象。

4、在test.html文件内,使用button标签创建一个按钮,按钮名称为“改变li的值”。

5、在test.html文件中,给button按钮绑定onclick点击事件,当按钮被点击时,执行editli()函数。

6、在js标签中,创建editli()函数,在函数内,使用getElementById()方法通过id(mytest)获得li对象,给该li对象的innerHTML属性重新赋值,实现改变li标签的值。

百度网友0b6a7ab
推荐于2017-09-18 · TA获得超过369个赞
知道小有建树答主
回答量:224
采纳率:0%
帮助的人:78.8万
展开全部
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题</title>
<style type="text/css">
ul li{
background: grey;
margin-bottom: 1px;
list-style: none;
}
</style>
<script type="text/javascript">
function change(obj){
var arr = document.getElementById("ul").getElementsByTagName("li");
for (var i = 0; i < arr.length; i++) {
var a = arr[i];
a.style.background = "grey";
};
obj.style.background = "red";
}
</script>
</head>
<body>
<ul id="ul">
<li onclick="change(this);">1</li>
<li onclick="change(this);">1</li>
<li onclick="change(this);">1</li>
<li onclick="change(this);">1</li>
<li onclick="change(this);">1</li>
<li onclick="change(this);">1</li>
<li onclick="change(this);">1</li>
<li onclick="change(this);">1</li>
</ul>
</body>
</html>

 事件的监听可以改下,这种方式拓展性不强,用jquery来监听吧,比较简单点

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式