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不好用,但是前边的好用
接近 2 年之前 回复
zhuzige521888
zhuzige521888 早知道你可以用jQuery就不那么麻烦了,换成这个就可以了tempLi.onclick = function() { $(this).addClass("lionclick").siblings().removeClass("lionclick"); }
接近 2 年之前 回复
l350172123
l350172123 不是额,这个点完css样式都变了,而且,我是点击哪个,哪个变色,点另一个,原来的变回去,还是要谢谢你
接近 2 年之前 回复
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', '');我这样写,能变色了,但是再点击其他的,原来点击的颜色没有取消
接近 2 年之前 回复
l350172123
l350172123 一个是创建折线图,另一个是创建table,大神,你的这个,没好用,我把两个颜色都加上了,没变
接近 2 年之前 回复
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
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
用angularjs写,点击盒子变色其他盒子恢复原色
test var myApp = angular.module("myApp", []); myApp.controller("testCtrl", function($scope){ $scope.data = [0,1,2,3,4]; $scope.isCurrent = function(index){ $scope.bg = []; $s
jQuery点击li标签改变颜色,其他li标签不变
.selected{ color:blue; } foo1 foo2 foo3 foo4 $(function(){ $("li").click(function(){ $(this).addClass("selected").siblings().removeClass("selected"); }); });
ul列表选中变色效果
本文讲解了如何动态生成ul列表,如何点击li改变本li样式
超简单点击li背景变色
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;script type=&quot;text/javascript&quot; src=&quot;jquery-1.9.1.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;style&amp;gt; *{margin: 0;padd
angular中实现li或者某个元素点击变色
先说一种最直接了当的不需要js控制,方法一:直接在用ng-class就可以控制: p ng-click="state=1;" ng-class="{active:state==1}">浮伤年华p> p ng-click="state=2;" ng-class="{active:state==2}">忧伤说笑p> 在style里面设置如下: style type="text/css
jquery+css实现点击他时变色 点击其他时自动还原
代码 测试 #list{wdith:100%;height:100px;} #list > li{float:left;width:50px;height:50px;background:black;margin:10px;cursor:pointer} .cur{color:#fff;background:#00CC00} $(
ul-li 点击改变背景色
CSS ul li{height: 25px;line-height: 25px;cursor: pointer;} .blue{background: rgb(40,169,227);color: white;} JS $(document).ready(function(){ $("ul li").click(function(){ $(th
jquery 动态点击li标签切换背景颜色
废话不多讲老规矩先上图 看效果:&amp;lt;script type=&quot;text/javascript&quot; src=&quot;/jquery/jquery.js&quot;&amp;gt;&amp;lt;/script&amp;gt; 改为你本地项目的js路径&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt;  &amp;lt;script type=&quot;text/javascript&am
li隔行划过点击变色
li隔行划过点击变色,用js写的可重用li隔行划过点击变色,用js写的可重用
jquery:点击之后变颜色,点击另一个,另一各变颜色,当前的恢复颜色
jquery:点击之后变颜色,点击另一个,另一各变颜色,当前的恢复颜色