xincsdn
2009-03-29 15:42
浏览 242

关于利用JQuery设置li的class的问题

如:
[code="html"]


  • home

  • about


    • [/code]

      上述HTML片断,想通过JQuery实现:

    • about
    • 效果。
      还望 朋友给予帮助,谢谢。
      [b]问题补充:[/b]
      Sorry~先要对两位朋友的热情帮助表示感谢,看了回复后才发觉自己的疏忽没有把问题说明清楚,真是抱歉。

      实现的效果其实应该是这样的,如果我点击了“about”那个链接并跳转到那个页面后,这时把li的class设为"current"。就是当前在哪个页面就把对应的那个li项设为current。

      [b]问题补充:[/b]
      [code="javascript"]

      // 设置菜单选中项的样式 $(function() { $("#menu a[href='/About']").addClass('current'); });

      [/code]

      我是要在about页面上写啊。上述代码把class增加到a标签里了。我一直没法把弄到li里。
      [b]问题补充:[/b]
      哦,忘了说明,因为那个li的菜单代码是放置在了.net“母版页”中。
      所以我就不能象楼下朋友说的那个直接加上一个current。
      [b]问题补充:[/b]

      呵~好像把问题复杂化了,简言之就是 如何实现设置a链接值为"/about"的li的class。

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

5条回答 默认 最新

  • playfish05 2009-03-30 10:14
    已采纳

    $("#menu a[href='/About']").parent("li").addClass('current');

    已采纳该答案
    打赏 评论
  • playfish05 2009-03-29 15:58

    $("#menu li:eq(2)").addClass("current")

    打赏 评论
  • iampurse 2009-03-29 17:11

    楼上的是可以实现效果,但感觉不好。
    因为li随时都有可能扩展增加 。
    你这样写等于是定死了。

    而且楼主的意思明显是这个class加的li不确定

    是点击哪个li,就把class加到哪个li上面。

    jQuery("#menu li").mouseover(
    funcion(){
    jQuery(this).toggleClass("current");
    }
    );

    jQuery("#menu li").mouseout(
    funcion(){
    jQuery(this).toggleClass("current");
    }
    );

    加上这个,就可以实现鼠标移上去 和 移走时候 移除和添加class的效果了。

    PS: 是jQuery(this)还是this忘记了,忘记传进来的是dom对象还是jQuery对象了,
    你自己试下,不是jQuery(this)就是this

    打赏 评论
  • playfish05 2009-03-29 17:39

    呵呵,如果是鼠标移动的效果的话,那也可以

    $("#menu li").hover(
    function(){
    $(this).addClass("current");
    },
    function(){
    $(this).removeClass("current");
    }
    );

    楼上的写法没错,不过jquery的精髓在于链式语法,你可以

    jQuery("#menu li")
    .mouseover(
    funcion(){
    jQuery(this).toggleClass("current");
    }
    ).mouseout(
    funcion(){
    jQuery(this).toggleClass("current");
    }
    );

    toggle是切换class,虽然你的写法可以达到效果,但是逻辑有点问题,比如说一个li原先有current,那么你鼠标移动上去就会把current给去掉,而移出来却把class又给加上去.

    打赏 评论
  • playfish05 2009-03-30 09:18

    :oops: :oops:

    跳转后页面已经刷新了..JavaScript是没办法这么做滴...

    你直接在about的页面上加上一个current就好了...不用费这么大劲..

    打赏 评论

相关推荐 更多相似问题