jquery li onclick 添加类答案

【问题标题】：Jquery li onclick add classjquery li onclick 添加类
【发布时间】：2012-08-13 21:40:23
【问题描述】：

我的母版页中有一个菜单。

 <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;}

单击菜单时，它会显示背景颜色，但随后会消失。在点击不同的菜单之前，如何让它保持活动状态？

谢谢

【问题讨论】：

我在 FF、Chrome 和 IE7,8 中测试过。工作得很好。 jsfiddle.net/9qgzk
您还有其他代码影响这些列表项吗？
“联系我们”链接不会导航到另一个页面吗？您需要在其他页面上再次设置背景。

标签： jquery css

【解决方案1】：

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>

【讨论】：

你把href='#'基于什么？您知道该页面将使用原始 html 重新加载。
是的 # 用于小提琴，我在发布后意识到，实际问题是无关的，除非 OP 使用 ajax，在我看到你评论之前相应地更新了响应。
因为他说it shows the background color but then it disappears.，那是因为页面“重新加载”
感谢大家的帮助，所以我删除了li:first-child，如何设置so on page reload the background is still on？我在母版页中的所有代码，是否还需要在每个 aspx 页面中添加 jquery？
发布更新后，通过中继器、服务器端控件、mvc 视图或其他方式选择一个 li 元素，然后根据用户所在的页面或其他服务器在母版页中添加测试类侧面状态。不需要 jQuery。

【解决方案2】：

这将使您能够根据当前页面 url 突出显示“当前列表项”
您必须在加载时测试 url：

$(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属性值开头的/！那是因为location.pathname 总是返回一个绝对路径。

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

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

【讨论】：

不会将/ 添加到href 中，因为它是一个相对链接？
是的，这就是这里的问题！但把 /folder/page.php 会解决它谢谢你