首页新闻找找看学习计划

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>
复制代码
yangzailu的主页 yangzailu | 初学一级 | 园豆:9
提问于:2017-01-16 13:39
< >
分享
最佳答案
0

鼠标指向这里可以通过css设置hover样式;点击这里可以通过jquery取到所有li遍历设置为白色,然后把this设置变色

奖励园豆:5
Albertyang | 菜鸟二级 |园豆:228 | 2017-01-17 11:46
其他回答(2)
0

好長..能不能說說你的問題在哪..

RosonJ | 园豆:2315 (老鸟四级) | 2017-01-16 13:43

点击后 有的文字变白色 或者影响其他li样式设置。

支持(0) 反对(0) yangzailu | 园豆:9 (初学一级) | 2017-01-16 13:44
0

百度学个mvvm框架.入门可以学ko和vue

以vm的角度来看问题

1.首先你有一个数组.(充值,家政,商城...)

2.你有一个当前选中对象变量,用来保存当前被选中的对象("充值")

3.点击事件干的事情是将之前选中的恢复,再将现在选中的修改

4.给那些logo图片加一个后缀,就是选中后的图片地址都是在原图片上加个相同后缀

PS:你要的可能是4

吴瑞祥 | 园豆:28675 (高人七级) | 2017-01-16 13:46
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册