JS点击事件实现改变对应标签背景颜色 迪士尼源码下载

迪士尼源码下载
地址一:【hubawl.com】狐霸源码论坛
地址二:【bbscherry.com】

起背景颜色变成红色,字体变成白色”,但是她的页面中只是字变了颜色,但是背景颜色去没有变化,
其截图如下:
这里写图片描述
这里写图片描述
这里写图片描述

经过页面的调试,发现并没有进入到循环里面,利用alert(cns.length);发现弹出的cns[]数组的长度为0个,
问题:
1、说明在document.getElementById(“nt4”).getElementsByTagName(“ul li”);取不到对应的li,发现不能这样取值,应该写成:document.getElementById(“nt4”).getElementsByTagName(“li”); alert(cns.length),证明可以取值;
2、但是取值之后,并没有进入到onclick事件里面去,这是为什么呢,将onclick事件换成监听事件: cns[i].addEventListener(‘click’,function () { }发现是可以进行点击的,因为这个页面中的li还有其他地方写了onclick事件,同一个元素有多个点击事件时,会被替代,所以图中的点击事件被其他的覆盖了,更换成addEventListene(‘click’,function () { }监听事件即可;
3、js代码部分可以实行了之后,发现背景颜色还是没有变成红色,因为css样式中,有原本.CRD_order li{}里写了背景颜色,而.lis{}的权重不够,背景颜色自然不能覆盖原来的颜色。

经过调试后,的代码如下:
html结构如下:

<div class="CRD" id="nt4">
<ul class="CRD_order" >
<li class="CRD-order" id="C_rd_order1" >全部<p class="ck1" id="ck1">◆</p></li>
<li class="CRD-order" id="C_rd_order2">未预定同学<p class="ck1" id="ck2">◆</p></li>
<li class="CRD-order" id="C_rd_order3" >已预订同学<p class="ck1" id="ck3">◆</p></li>
<li class="CRD-order" id="C_rd_order4" >未支付定金同学<p class="ck1" id="ck4">◆</p></li>
<li class="CRD-order" id="C_rd_order5" >已支付定金同学<p class="ck1" id="ck5">◆</p></li>
<li class="CRD-right">下载班级报表</li>
</ul>
</div>

页面效果:

这里写图片描述

需实现的效果是点击对应的标签,起背景颜色变成红色,字体变成白色
js代码:

<script>
    var cns = document.getElementById("nt4").getElementsByTagName("li");

    for(var i = 0;i<cns.length;i++)
    {
        cns[i].addEventListener('click',function () {

            for(var i = 0;i<cns.length;i++){
                cns[i].className = "";
            }
            this.className = "lis";
        });
    }
</script>

//css样式部分:
.CRD_order .lis{
background: red;
color: #fff;
}

知识点:
1、.getElementsByTagName(“li”);取值为一个li集合,对每个li点击事件需要for循环才能取到具体的每个li

for(var i = 0;i<cns.length;i++)
{
cns[i].addEventListener('click',function () {

    }

2、一个元素不能有多个点击事件,会被后来的点击事件覆盖;
3、css权重:二级权重大于一级权重:.CRD_order .lis{}的权重大于.lis{};
4、调试代码时要学会利用弹出取值的方法来确定所写的代码是否正确,是否真的取到了你想要的值,取值不对,后面的也就都不会实现了;

猜你喜欢

转载自blog.51cto.com/13917468/2157236