2 l350172123 l350172123 于 2016.09.13 08:33 提问

设置一个li点击变色的方法


如图,想加一个点击哪条li,哪条就变背景色的方法

7个回答

zhuzige521888
zhuzige521888   2016.09.13 10:29
已采纳
看看是否能满足你的要求:
<script type="text/javascript">
    var tempUL = document.getElementById("CompanyList");
    for( var i=0;i<5;i++){
        var tempLi = document.createElement("li");
        tempLi.dataId = i+1;
        var tempString = "<div style='float:left;' class='num'>" +(i+1)+"</div><div style='float:left;' class='Company'>段总分公司</div></br>";
        tempLi.onclick = function() {
            if(this.className=="lionclick"){
                this.className="";//li变色 
                this.firstChild.className="";
                this.firstChild.nextSibling.className="Company";
            }else{
                this.className="lionclick";//li变色 
                this.firstChild.className="lionclick";//num变色 
                this.firstChild.nextSibling.className="lionclick";//conmpany变色 
            }
        }
        tempLi.innerHTML=tempString;
        tempUL.appendChild(tempLi);
    }

</script>
<style type="text/css">
    li{  
        list-style-type:none;  
    }  
    .Company{
        background: #449d44;
    }
    .lionclick{
        background: yellow;
    }
</style>
l350172123
l350172123 回复一个程序猿子: 不行啊,大神,remove不好用,但是前边的好用
大约一年之前 回复
zhuzige521888
zhuzige521888 早知道你可以用jQuery就不那么麻烦了,换成这个就可以了tempLi.onclick = function() { $(this).addClass("lionclick").siblings().removeClass("lionclick"); }
大约一年之前 回复
l350172123
l350172123 不是额,这个点完css样式都变了,而且,我是点击哪个,哪个变色,点另一个,原来的变回去,还是要谢谢你
大约一年之前 回复
qq_29594393
qq_29594393   Ds   Rxr 2016.09.13 08:40

选择这些li 用toggleClass()添加一个class,用来改变颜色

showbo
showbo   Ds   Rxr 2016.09.13 09:04

你的tempLi添加2个click是干嘛的。修改任意一个事件,给li添加背景色就好了

 function CreateData(){
$(this).css('background-color','#f00').siblings().css('background-color','');
//......其他代码
}
l350172123
l350172123 $(this.getElementsByClassName("Company")).css('background-color', '#CBEAFE').siblings().css('background-color', '');我这样写,能变色了,但是再点击其他的,原来点击的颜色没有取消
大约一年之前 回复
l350172123
l350172123 一个是创建折线图,另一个是创建table,大神,你的这个,没好用,我把两个颜色都加上了,没变
大约一年之前 回复
u013829202
u013829202   Rxr 2016.09.13 09:10

获取点击的li,加个改变背景颜色的样式就行了。

WxjMLove
WxjMLove   2016.09.13 09:49

加一个点击事件 点击触发之后 改变他的颜色样式

qq_35718410
qq_35718410   2016.09.13 10:19

给li加点击事件就可以了
li.onclick=function(){
''修改背景颜色代码''
}

u010217654
u010217654   2016.09.13 11:48
  li:focus{
        color: red;
    }
Csdn user default icon
上传中...
上传图片
插入图片