Question

我试图通过使用jquery在菜单中的<li>元素上添加一个简单的类/ id。

然而，当我点击一个菜单选项时，我的类/ id被jquery成功添加，但我的网站当然会更新，因为它会重定向到choicen网站。

我最终得到的结果是因为此更新而删除了我的class / id ..

如何绕过这一点，以便我的班级/ ID保留在所选菜单<li>元素上。

我的代码如下所示：

 $(document).ready(function()  
 {  
    $('li').click(function()  
    {  
       $(this).addClass('selected');  
    });  
 });

这是网站：http://insatsplutonen.xedge.nu/ 通过菜单选项单击您自己。如果你点击ex：Blogg，那么'选定的类'将被添加到<li>元素上，但由于页面加载而会消失......

我希望选择菜单选项变成白色而其他人保持灰色:)

亲切的问候/哈里斯

Answer 1

好像您正在根据查询字符串加载页面。当我选择“Blogg”时，我会得到http://insatsplutonen.xedge.nu/?Blogg

当您加载页面并检查查询字符串并在那里找到菜单变量时，将变量设置为菜单项值，并使用它来相应地设置菜单项的类。防爆。对于Blogg项目：

<li <?php echo ($queryStrVal == 'Blogg') ? 'class="selected"' : ''; ?>>

Answer 2

如果我理解你的要求，解决这个问题的一种方法是在页面上设置一个页面类，例如在主体上，用于识别当前“选中”哪个菜单选项。所以像这样：

<body class="home">
    <ul>
        <li id="homeNav"></li>
        <li id="aboutNav"></li>
        <li id="contactNav"></li>
    </ul>
</body>

然后你的css看起来像这样：

.home #homeNav,
.about #aboutNav,
.contact #contactNav {
    // whatever styles represent "selected" here
}

这样，“选定的”导航项始终会在其代表的页面上显示。

Answer 3

要在jQuery中执行，请使用窗口位置的href找到<a>，并为其父级提供li该类。一旦他们到达他们想要的页面，就会发生这种情况，而不是在他们点击链接时，所以即使在浏览器中粘贴网址，也会将.selected添加到正确的li

var urlend= window.location.href.replace(window.location.origin + window.location.pathname, '');
$('a[href="' + urlend + '"]').parent().addClass("selected");

添加了更新时删除的ID /类

3 个答案: