jquery li onclick添加类

我在母版页中有一个菜单。jquery li onclick添加类

<ul> 
    <li><a href="."><span>Home</span></a></li> 
    <li><a href="contactus.aspx"><span>contact us</span></a></li> 
</ul>

当我点击菜单上的项目，我想使用jQuery设置CSS类

$(function() { 

      $("li:first-child").addClass("test"); 
      $('li').click(function() { 
       $(this).addClass('test'); 

      }); 
     });

CSS

.test {background-color:Red;}

菜单上点击时

，它显示的背景颜色，但然后它消失。我如何使它保持活动，直到点击不同的菜单？

谢谢

来源

2012-08-13 Ben

我在FF，Chrome和IE7,8测试了它。工作很好。 http://jsfiddle.net/9qgzk/ – Gabe 2012-08-13 21:43:09

你有任何其他代码影响这些列表项目？ – 2012-08-13 21:43:48

“联系我们”链接不会导航到另一个页面吗？您需要在其他页面上重新设置背景。 – nnnnnn 2012-08-13 21:45:55

UPDATE2：这不是一个JavaScript的问题

<li><a href="#"><span <%=ServerSizeLogic.SelectedMenu("Home")%>>Home</span></a></li>

这是一个讨厌的猜测是如何在服务器端的威力吧，这取决于你的服务器端技术。 ServerSizeLogic.SelectedMenu("Home")或任何你使用的将返回一个空字符串或“class ='test'”。只要确保只有你的li元素的得到的风格之一，并删除客户端代码

// don't do it like this but hopefully you get the gist 
ServerSizeLogic::SelectedMenu(string item){ 
    if (item == CurrentPage) 
     return "class='test'"; 
    return ""; 
}

更新：很明显，一旦您导航离开该页面，你要选择的元素必须来自于服务器（除非你正在使用AJAX），其中投刚刚摆脱li:first-child，并直接在您的视图代码设置类当前li元素

原件上：这个怎么样小提琴http://jsfiddle.net/LmUrP/

$(function() { 

     $("li:first-child").addClass("test"); 
     $('li').click(function() { 
      $('#menu li').removeClass('test'); 
      $(this).addClass('test'); 
     }); 
    });

HTML

<ul id='menu'> 
    <li><a href="#"><span>Home</span></a></li> 
    <li><a href="#"><span>contact us</span></a></li> 
    <li><a href="#"><span>apples</span></a></li> 
    <li><a href="#"><span>bananas</span></a></li> 
</ul>

来源

2012-08-13 21:46:34

你把'href ='＃''基于什么？你知道该页面会重新加载原始的HTML。 – UnLoCo 2012-08-13 21:53:18

是的＃是为小提琴，我发现之后意识到，实际问题是无关的，除非OP使用ajax，在我看到你评论之前相应地更新响应。 – 2012-08-13 21:56:44

，因为他说'它显示背景颜色，但然后它消失。'，这是因为页面“重新加载” – UnLoCo 2012-08-13 22:08:05

这将使你能够突出基于当前网页的网址
你必须要测试的网址上载“当前列表项”：

$(function() { 
    $('ul#menu>li>a[href="'+location.pathname+'"]').addClass('test');  
});

有你的这样的HTML：

<ul id="menu"> 
    <li><a href="/"><span>Home</span></a></li> 
    <li><a href="/contactus.aspx"><span>contact us</span></a></li> 
</ul>

通知/在href attr的开头ibute的价值！这是因为location.pathname总是返回一个绝对路径。

这里有一个小提琴http://jsfiddle.net/unloco/29E23/
我写href="/_display/"，因为这是的jsfiddle的显示iframe的网址！

但是如果你的页面在http://domain.com/folder/page.php你必须写href='/folder/page.php'才能有正确的行为！

来源

2012-08-13 21:51:34 UnLoCo

不会在href中添加'/'会破坏链接，因为它是相对链接？ – nnnnnn 2012-08-13 22:01:13

是的，这是这里的问题！但把/folder/page.php将修复它谢谢 – UnLoCo 2012-08-13 22:04:36

jquery li onclick添加类

回答

相关问题