Question

我正在尝试使用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>

jquery的：

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

我需要它点击链接一旦它分配了“选择”类，奇怪，因为手动点击似乎不起作用？

的CSS：

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

Answer 1

您可以使用

手动触发点击

.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>

在每个页面上，为body标签添加一个id：

<body id="home-page">

然后，您可以使用以下方式对当前选定的li进行样式设置：

#home-page .home-link {}

这有帮助吗？

Answer 2

这是因为您正在使用e.preventDefault();，这会禁用<a>的默认行为。

另外，请注意jQuery当前不支持:link选择器。因此，您的选择器只能在某些浏览器中使用。

您可能想要使用此代码：

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

编辑：

当然，链接后会导致加载新页面，以前对DOM的任何更改都将丢失。

如果您只想尝试设置当前页面的链接，请尝试一下：

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

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

当页面加载时，它将获取pathname window.location中的最后一项，并将其连接到选择器中以选择该页面的<a>元素。

Answer 3

嗯。如果您想要“点击”链接，则必须删除以下行：

e.preventDefault();

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

希望这会有所帮助。干杯

Answer 4

您的代码正在按照您的要求执行操作：事件处理程序中的e.preventDefault();会阻止该事件的默认行为。

将类添加到菜单<li>，然后使用jquery单击链接？</li>

4 个答案: