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

JavaScript07

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

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标签的值。

鉴于你是刚刚学的js我想这样的口味比较适合你

<ul>

<li onclick="clc(123)">123</li>

<li onclick="clc('asd')">123</li>

<li onclick="clc('!!!')">123</li>//直接写onclick点击事件,括号里的是传参

</ul>

<script type="text/javascript">

function clc (a) {

alert(a)

}

</script>

思路:为li对象添加单击事件→事件触发后利用innerHTML获取li的文本。实例演示如下:

1、HTML结构

<ul id="test">

<li>Glen</li>

<li>Tane</li>

<li>John</li>

<li>Ralph</li>

</ul>

2、javascript代码

window.onload = function(){

var obj_lis = document.getElementById("test").getElementsByTagName("li")

for(i=0i<obj_lis.lengthi++){

obj_lis[i].onclick = function(){

alert(this.innerHTML)

}

}

}

3、效果演示