javascript - 导航选项卡保持某种颜色

Question

我正在使用 ASP.net 并且有一个使用导航的母版页。我的问题是，当我点击一个链接时，它加载了一个不同的 asp 页面，但导航选项卡没有切换到点击的颜色，而是恢复到原来的颜色。由于所有页面都加载相同，我不能只使用 CSS，因为页面已重新加载。有没有办法编写一个 javascript 函数来告诉页面加载时显示悬停颜色并将其保持在那里？由于我使用的唯一 HTML 位于母版页上，因此我无法切换任何内容。我确定必须有一种使用 nth-child 的方法，但我无法弄清楚。至于代码，一个简单的例子是:

<div>
   <ul>
     <li>One</li>
     <li>Two</li>
     <li>Three</li>
   </ul>
</div>

那么如何让第二个链接在加载页面时切换到悬停颜色？

Answer 1

我已经有一段时间没有玩过 asp 了，所以我没有确切的术语，但我可以为您指明正确的方向。

首先，在您的母版页中，为所有导航链接添加唯一 ID。这将使访问特定 asp 页面中的这些链接变得微不足道。这样做很有帮助，否则很难选择所需的链接。 jQuery 例如 $("div ul li:nth-child('2')")将选择第二个 li那是 ul 的 child 那是 div 的 child ，但这可能发生在您页面上的任何位置。

完成后，让我们假设您的导航面板如下所示:

<div>
   <ul>
     <li id="linkOne">One</li>
     <li id="linkTwo">Two</li>
     <li id="linkThree">Three</li>
   </ul>
</div>

然后，在点击“二”时加载的页面中，您需要添加一个带有修改链接的 onLoad 处理程序的脚本:

<script>
    document.onload = function() { $("#linkTwo").addClass("hover"); };
</script>

这将等到文档加载完毕(否则您可能会尝试更改一个尚不存在的元素)，然后运行一个函数来查找 id 为“linkTwo”的特定元素并将 css 类“hover”添加到

显然，这一行对于每个特定的 asp 页面都是不同的 - 或者您可以让服务器端逻辑计算的东西。