jquery代码更改（跪谢）
0
[已解决问题]
解决于 2017-01-18 09:13
点击li，li背景颜色改变，图片改为白色，鼠标指向那个li li的背景色和图片改为白色，默认为第一个变色。点击其他的li，被点击的恢复。
白色图标：
css：
.ser_box{width:100%;height:100%;overflow-y:auto}
.ser_header{width:100%;height:90px;}
.ser_headc{width:85%;height:90px;margin:0 auto;}
.ser_left{width:20%;height:90px;float:left;}
.ser_center{width:60%;height:90px;float:left;border-bottom:1px solid #C4DBED;}
.ser_right{width:19%;height:90px;float:left;text-align:right;font-size:12px;}
.ser_menu{width:20px;vertical-align:middle;}
.ser_text{vertical-align:middle;}
.ser_ul{list-style:none;overflow:hidden;margin:0 auto;width:100%;}
.ser_ul li{float:left;height:40px;line-height:40px;border:1px solid #C4DBED;border-bottom:none;text-align: center;}
.ser_li{width:12%;}
.ser_li_speical{width:14%;}
.ser_focus{background-color:#557FB9;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="" /> <meta name="Description"content="" /> <link rel="shortcut icon" href="__PUBLIC__/images/favicon.ico"> <title>服务分类详情</title> <script src="jquery-1.7.1.min.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div class="ser_box"> <div class="ser_header"> <div class="ser_headc"> <div class="ser_left"> <img style="margin-top:30px;" src="./images/logo.png"> </div> <div class="ser_center"> <div style="height:40px;width:100%;margin-top:50px;border-bottom:none;"> <ul class="ser_ul" id="oop"> <li class="ser_li" style="border-right:none;"> <img class="ser_menu" src="./images/dowers.png"> <span class="ser_text">充值</span> </li> <li class="ser_li" style="border-right:none;"> <img class="ser_menu" src="./images/housekeep.png"> <span class="ser_text">家政</span> </li> <li class="ser_li" style="border-right:none;" > <img class="ser_menu" src="./images/mall.png"> <span class="ser_text">商城</span> </li> <li class="ser_li" style="border-right:none;"> <img class="ser_menu" src="./images/checkin.png"> <span class="ser_text">签到</span> </li> <li class="ser_li_speical" style="border-right:none;"> <img class="ser_menu" src="./images/payment.png"> <span class="ser_text">物业费缴纳</span> </li> <li class="ser_li" style="border-right:none;"> <img class="ser_menu" src="./images/tool.png"> <span class="ser_text">报修</span> </li> <li class="ser_li" style="border-right:none;"> <img class="ser_menu" src="./images/complaints.png"> <span class="ser_text">投诉</span> </li> <li class="ser_li"> <img class="ser_menu" src="./images/car.png"> <span class="ser_text">车辆</span> </li> </ul> </div> </div> <div class="ser_right"> <span style="display:block;margin-top:60px;"> <span><img style="vertical-align:middle;" src="./images/per.png"></span> <span style="color:#5381B5;vertical-align:middle;">用户名，你好</span> <span style="padding-left:15px;vertical-align:middle;"><a href="{:U('Login/Login')}">退出</a></span> <span> </div> </div> </div> <script type="text/javascript"> $(function(){ var initLi = function () { $(".ser_ul li").css("background","#FFF"); $(".ser_ul li").mouseover(function () { $(this).css("background", "#557FB9"); $(this).children().css("color","#FFF"); }) $(".ser_ul li").mouseout(function () { $(this).css("background", "#FFF"); $(this).children().css("color","#5A5657"); }) }; initLi(); $(".ser_ul li").click(function () { initLi(); var str= $(this).find("img").attr("src"); str = str.split('.'); str.pop(); url = str.join('.')+'_w'+'.'+'png'; alert(url); //$(this).find("img").attr("src","url");// $(this).find("img").attr("src",url); //当前被点击的控件改变背景色 $(this).css("background", "#557FB9"); $(this).children().css("color","#FFF"); //取消当前控件的mouseout和mouseover事件 $(this).unbind("mouseout"); $(this).unbind("mouseover"); $('.ser_li').siblings().not(this).css('background', '#FFF'); $('.ser_li').siblings().not(this).children().css('color', '#5A5657'); }); }) </script>
最佳答案
0
鼠标指向这里可以通过css设置hover样式；点击这里可以通过jquery取到所有li遍历设置为白色，然后把this设置变色
奖励园豆：5
其他回答(2)
0
好長..能不能說說你的問題在哪..
点击后 有的文字变白色 或者影响其他li样式设置。
0
百度学个mvvm框架.入门可以学ko和vue
以vm的角度来看问题
1.首先你有一个数组.(充值,家政,商城...)
2.你有一个当前选中对象变量,用来保存当前被选中的对象("充值")
3.点击事件干的事情是将之前选中的恢复,再将现在选中的修改
4.给那些logo图片加一个后缀,就是选中后的图片地址都是在原图片上加个相同后缀
PS:你要的可能是4
