发新贴  快速回复

各位大神帮忙看一下

tqxixi
2016-09-07 14:49
实现的效果是,鼠标滑过变黄色,滑出变灰色,点击变红色,当li标签点击过后在滑动不变色,其他li标签依然滑过变色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小练习</title>
    <style>
        body,html,ul{
            margin: 0px;
            padding: 0px;
        }
        body{
            text-align: center;
        }
        ul{
            margin: 50px auto;
        }
        li{
            width: 50px;
            height: 50px;
            border: 1px solid #000000;
            list-style: none;
            display: inline-block;
        }
    </style>
    <script>
        window.err==function () {
            var oUl=document.getElementsByTagName("ul")[0];
            var aLi=oUl.getElementsByTagName("li");
            var arrColor=["yellow","grey","red"];
            var num=0;
            for(var i=0;i<aLi.length;i++){
                aLi[i].index=i;
                aLi[i].err==function () {
                    if(aLi[this.index].style.background=="red"){
                        this.style.background=arrColor[2];
                    }
                    else {
                        this.style.background = arrColor[0];
                    }
                }
                aLi[i].err==function () {
                    if(aLi[this.index].style.background=="red"){
                        this.style.background=arrColor[2];
                    }
                    else {
                        this.style.background = arrColor[1];
                    }
                }
                aLi[i].err==function () {
                    this.style.background=arrColor[2];
                }
            }
        }
    </script>
</head>
<body>
  <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
  </ul>
</body>
</html>
13242362600
问题是什么,看不懂你的描述。
2016-09-08 11:11  回复本帖
 
xgl
你说的效果我也遇到过,我是用jq解决的,把你要改变的样式用class写出来,通过设置class的优先级解决的,就是划过和点击分别加一个class,
如划过 ul .hua{}
点击    ul li.dian{}这样划过的样式就不会把点击的样式覆盖了,你可以用js试试我估计应该能解决
2016-09-08 12:16  回复本帖
tqxixi
forum.php?mod=redirect&goto=findpost&pid=113319&ptid=49282
问题是什么,看不懂你的描述。

我的意思是这个代码在火狐下不能实现点击变红色,再滑过不变色,其他未被点击的仍然划过变色
2016-09-09 14:03  回复本帖
tqxixi
forum.php?mod=redirect&goto=findpost&pid=113321&ptid=49282
你说的效果我也遇到过,我是用jq解决的,把你要改变的样式用class写出来,通过设置class的优先级解决的,就 ...

我还没学到Jquery,等学到的时候试一下你的方法,谢谢你的帮助
2016-09-09 14:04  回复本帖
王江
  aLi[i].onclick=function () {

                      for(var i=0;i<aLi.length;i++){
                        aLi[i].style.background = arrColor[1];
                      }

                    this.style.background=arrColor[2];
                }
[i][i]把所有的颜色 重置下  再设置当前
2016-09-09 15:22  回复本帖
tqxixi
forum.php?mod=redirect&goto=findpost&pid=113357&ptid=49282
aLi.err==function () {

                      for(var i=0;i

好的,我去试一下,谢谢~
2016-09-10 17:09  回复本帖
YangShen
你这个判断的方式有问题,
谷歌下aLi[this.index].style.background得出来的是颜色英文表示,
而火狐不是,
你可以点击弹出颜色值,看一下就明白了
2016-09-12 00:09  回复本帖
13242362600
forum.php?mod=redirect&goto=findpost&pid=113353&ptid=49282
我的意思是这个代码在火狐下不能实现点击变红色,再滑过不变色,其他未被点击的仍然划过变色
 ...

因为你设置的background而不是backgroundColor,在火狐下,background对应的是全部背景,即:red none repeat scroll 0% 0%而不是red,所以两者肯定不等会触发鼠标移入移出事件。
解决方法:把判断条件里面的background修改成backgroundColor。
2016-09-12 23:25  回复本帖
登录 后才可以发表回复