首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

一个导航栏有关问题

2013-10-01 
一个导航栏问题小弟想做一个导航栏,是用Ul和LI做的,现在要弄一个效果就是点击导航栏中一个按钮那个按钮的

一个导航栏问题
小弟想做一个导航栏,是用Ul和LI做的,现在要弄一个效果就是点击导航栏中一个按钮那个按钮的背景改变(导航原来是有背景的,背景是li 的背景),然后鼠标离开后被点击的按钮背景不变,直到有另一个按钮被点击了,那第一次点击的按钮背景变回原来的背景。
[解决办法]
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());
    });
});

[解决办法]
引用:
如果每一个li的图片都不一样,有什么办法呢


提供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];
   

热点排行