将类添加到菜单<；李>；然后使用jquery单击链接？

我正在尝试使用jquery将一个类添加到我的css菜单中。当你点击菜单项时，它会添加所选的类，但实际上它并没有点击超链接

编辑：它添加一个

li

类。但当我点击时，它什么也不做

Html:

<div id="nav"> 
 <nav>
   <ul class="topmenu">
    <li><a href="home.aspx">Home</a></li>
    <li><a href="about.aspx">About</a></li>
    <li><a href="contact.aspx">Contact</a></li>
   </ul>
 </nav>
</div>

<script type="text/javascript">
    $(function () {
        $('.topmenu a:link').click(function (e) {
            e.preventDefault();
            var $this = $(this);
            $this.closest('ul').children('li').removeClass('selected');
            $this.parent().addClass('selected');
        });
    });

</script>

#nav 
{
    width: 100%;
    height: 30px;
}
nav a.current
{
    display: block;
    margin: auto;
    width: 950px;
}
nav ul
{
    list-style: none outside none;
    margin: 8px 0 0;
}
nav li
{
    float: left;
    height: 45px;
    left: -45px;
    position: relative;
    top: -16px;
    z-index: 2000;
}

nav li a {
    color: #FFFFFF;
    text-decoration: none;
}

nav a:link, nav a:visited, nav a:active
{
    display: block;
    float: left;
    font-size: 14pt;
    font-weight: normal;
    height: 33px;
    padding: 11px 17px 0;

}
nav li:hover, .home-link a, .current_page_item a:link, .current_page_item a:visited, a.children_openend, .topmenu li.selected a
{
    background: url("images/dc/menu-selected.png") repeat-x scroll 0 0 transparent !important;
    color: #FFFFFF;
}



nav a:hover
{
    color: #FFFFFF;
}

---

您可以使用手动触发单击

.trigger("click");

所以，在你这样做之后

addClass("selected");

只需在末尾标记一个trigger（）调用：

addClass("selected").trigger("click");

编辑：

您可以手动重定向浏览器，而不是执行此操作：

addClass("selected");
window.location.href = $this.attr("href");

.trigger（）无法工作，因为您在li上触发它，而不是在a上。我道歉

再次编辑：

如果我没弄错的话，您希望在单击链接并加载新页面后，li仍然拥有该类。你可以用CSS来实现这一点。如果为每个列表项指定与页面相关的类，例如：

<li class="home-link">....</li>

---

这有帮助吗？

您可以使用

.trigger("click");

所以，在你这样做之后

addClass("selected");

只需在末尾标记一个trigger（）调用：

addClass("selected").trigger("click");

编辑：

您可以手动重定向浏览器，而不是执行此操作：

addClass("selected");
window.location.href = $this.attr("href");

.trigger（）无法工作，因为您在li上触发它，而不是在a上。我道歉

再次编辑：

如果我没弄错的话，您希望在单击链接并加载新页面后，li仍然拥有该类。你可以用CSS来实现这一点。如果为每个列表项指定与页面相关的类，例如：

<li class="home-link">....</li>

---

这有帮助吗？

这是因为您使用的是

e.preventDefault（）

，它禁用了

的默认行为

另外，请注意jQuery当前不支持

：link

选择器。因此，选择器只能在某些浏览器中工作

您可能希望改用此选项：

$('.topmenu a[href]').click(function (e) {

---

编辑：

当然，跟随链接将导致加载新页面，并且之前对DOM所做的任何更改都将丢失

如果您只是尝试为当前页面设置链接样式，请尝试以下操作：

var page = window.location.pathname.split('/').pop();

$('a[href$="' + page + '"]').parent().addClass('selected');

---

当页面加载时，它将获得

窗口.location

的

路径名中的最后一项，并将其连接到选择器中，以选择该页面的
元素。
这是因为您使用的是
e.preventDefault（）
，它禁用了
的默认行为

另外，请注意jQuery当前不支持
：link
选择器。因此，选择器只能在某些浏览器中工作

您可能希望改用此选项：

$('.topmenu a[href]').click(function (e) {


编辑：

当然，跟随链接将导致加载新页面，并且之前对DOM所做的任何更改都将丢失

如果您只是尝试为当前页面设置链接样式，请尝试以下操作：

var page = window.location.pathname.split('/').pop();

$('a[href$="' + page + '"]').parent().addClass('selected');

当页面加载时，它将获得
窗口.location
的
路径名中的最后一项，并将其连接到选择器中，以选择该页面的
元素。
Mmm。如果希望“单击”链接，则必须删除以下行：

e.preventDefault();

但是，该链接将转到其
href
中设置的页面，我不知道这是否是您想要的

希望这有帮助。干杯
嗯。如果希望“单击”链接，则必须删除以下行：

e.preventDefault();

但是，该链接将转到其
href
中设置的页面，我不知道这是否是您想要的

希望这有帮助。干杯
您的代码正在执行您告诉它的操作：
e.preventDefault（）阻止该事件的默认行为。
您的代码正在执行您告诉它的操作：
e.preventDefault（）阻止该事件的默认行为。
…忽略我之前关于递归的评论。单击的是父对象。因此，
.trigger（'click'）
根本不会影响
。@Jack：这是可行的，但很明显，当新页面加载时，它会清除类“selected”，然后我的菜单项对用户来说不再是高亮显示的。看看这个网站，他们使用的是css方法，但我不知道他们是如何应用的，我会试试，然后再给你回复。。当我第一次尝试它时，我无法让它工作。。。抱歉…忽略我之前关于递归的评论。单击的是父对象。因此，
.trigger（'click'）
根本不会影响
。@Jack：这是可行的，但很明显，当新页面加载时，它会清除类“selected”，然后我的菜单项对用户来说不再是高亮显示的。看看这个网站，他们使用的是css方法，但我不知道他们是如何应用的，我会试试，然后再给你回复。。当我第一次尝试它时，我无法让它工作。。。Sorry我没有进行向下投票，但我认为这是因为如果您删除preventDefault（），浏览器只会将您带到新位置，而不会首先执行所需的代码。@Jack：代码将在链接之后执行。我把“但它实际上没有点击超链接”解释为超链接没有被跟踪。OP在这一点上并不十分清楚。@patrick dw-我和firebug进行了检查，它似乎添加了类，然后删除了它？（因此，我通过css选择的背景图像不会启动）但链接可以工作。。有什么想法吗？@PD24:如果您希望该链接被跟踪，那么将加载一个新页面，并且您在上一页面上对DOM所做的任何更改都将丢失。你想给代表当前页面的链接赋予一些风格吗？@patrick dw:我想用不同的颜色选择菜单项，这样用户就知道他们在哪一页了。我决定使用jquery在单击时添加“selected”类，因此触发了我的css。我没有进行向下投票，但我认为这是因为如果删除preventDefault（），浏览器将只将您带到新位置，而不会首先执行所需的代码。@Jack：代码将在跟随链接之前执行。我解释过“但是