一个导航栏问题

Question

小弟想做一个导航栏，是用Ul和LI做的，现在要弄一个效果就是点击导航栏中一个按钮那个按钮的背景改变（导航原来是有背景的，背景是li 的背景），然后鼠标离开后被点击的按钮背景不变，直到有另一个按钮被点击了，那第一次点击的按钮背景变回原来的背景。

Answer 1

最简单的做法就是导航栏的一个按钮被点击，先将所有导航栏按钮设置成没有被点击的样式，然后再将被点击的样式改为被点击的，这样就不用去记住原来的状态，可以用jquery做，比较简单

Answer 2

哥们我都知道这样弄，代码呢？？JQ真心不熟<script language="javascript">
document.onreadystatechange=function()  //当页面状态改变时执行函数
{
 if (document.readyState != "complete") {
 } else {  //   var ali=document.getElementById("mainli").getElementsByTagName("li");
    var li = document.getElementsByTagName("li");
     for (var i = 0; i < ali.length; i++) {
         ali[i].onclick = function () {                        //为循环的li节点绑定 onclick事件 也就是点击事件
             for (var j = 0; j < ali.length; j++) {
                 ali[j].style.backgroundImage='url(x1-01-01.png)';
                 this.style.backgroundImage='url(x66-01.png)';
             }
         }  
     }
 }
}
</script>
这个我找到的代码，但这个代码控制所有的li，有什么办法可以令它只是控制一个class里的li

Answer 3

LZ如果想控制不同的li，可以设置li的class，之后通过选择器来实现
举个例子：<ul>
    <li>li1</li>
    <li class='mouseover'>mouseover</li>
    <li class='mouseout'>mouseout</li>
    <li class='mouseover'>mouse over</li>
    <li class='mouseout'>mouse out</li>
</ul>
$("li.mouseover").each(function() {
    $(this).bind("mouseover", function() {
        alert($(this).text());
    });
});
$("li.mouseout").each(function() {
    $(this).bind("mouseout", function() {
        alert($(this).text());
    });
});

Answer 4

$('ul li').click(function() {
    $(this).parent().find('li').not($(this)).removeClass('current');
    $(this).addClass('current');
});

Answer 5

$('ul li').on({
    mouseover: function() {
        $(this).parent().find('li').not($(this)).removeClass('current');
        $(this).addClass('current');
    },
    mouseout: function() {
        fsfsfsfsf
    }
});

Answer 6

提供LZ参考思路：
1. 创建一个{}，内部KEY为LI的ID属性或其他自定义属性值，VALUE为图片URL
   如：<li idx='1'></li>
   
   var imgs = {
      "1": "../../xxx.jpg"
   }
   
2. 移动至LI上后，读取LI属性值，并从{}获取图片路径
   
   var idx = $("li").attr("idx");
   var imgUrl = imgs[idx];