Question

尝试让我的导航具有单击和选中状态，但我无法使用此代码（网站为：http://bit.ly/rgwsite）

$('nav li a').click(function() {
$(this).parent().addClass('on').siblings().removeClass('on');
});

nav li如下

<nav>
  <li class="highlt">
    <a href="index.php" class="home"><span>Home</span></a>
</li>

我们需要使用jquery / javascript操作将类添加到导航的原因是因为在加载新页面时它不会刷新。例如，当您在主页上并单击“体验RGW”选项卡时，它仅在标题下方（在“#ajax”div内）加载该页面的内容。目前，这些脚本都不起作用。没有理由他们不应该...还有其他原因会导致页面无法识别jquery脚本并单击运行它吗？我问的主要原因是因为我试图测试该功能并添加警报，但即使这样也无效

提前致谢！

Answer 1

兄弟姐妹选择了您当前的元素，您不想删除他的'on'类。

$('nav li a').click(function() {
  $(this).parent().siblings().removeClass('on');
  $(this).parent().addClass('on');
});

编辑：nvm，您的代码正常：看看这个jsfiddle。

重新编辑：我完全错了，siblings不包含当前元素。

重新编辑：如果你链接到另一个页面（href="index.php"），页面将被重新加载（或者将加载一个新的页面），你的JavaScript点击动作将被遗忘，可能是错误？

Answer 2

你可能想这样试试：

$(this).parent().siblings().removeClass('on');
$(this).parent().addClass('on');

您所做的是将“on”类添加到LI，然后使用.siblings().removeClass('on');

将其删除

脚本不适用于On Click和Selected导航状态

2 个答案: