使用以下内容：

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页面中的链接变得微不足道。它有助于这样做，因为否则很难选择你想要的链接。像$("div ul li:nth-child('2')")这样的jQuery会选择li的{{1}}的孩子，该ul的孩子是div的孩子，但这可能发生在您网页的任何地方。

有了这个，让我们假设您的导航面板如下所示：

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

然后，在单击Two时加载的页面中，您需要添加一个脚本，该脚本带有修改链接的onLoad处理程序：

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

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

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

Answer 2

你的问题有点不清楚。但是，如果我理解你的情况，我应该使用一个特定的css类，如果你确定你在当前页面上加载。

像这样（我不知道asp，我会举一个例子）

<div>
   <ul>
     <li <?php if($CurrentPage = 'One') {echo 'class="active"';} ?>>One</li>
     <li <?php if($CurrentPage = 'Two') {echo 'class="active"';} ?> >Two</li>
     <li <?php if($CurrentPage = 'Three') {echo 'class="active"';} ?>>Three</li>
   </ul>
</div>

这将为您的元素添加一个特殊类。该类将具有悬停颜色，问题就解决了。希望你能适应这个。

Answer 3

使用以下内容：

html代码

<body>
    <div>
       <ul style="display:inline; background-color:lightgray; float:left">
         <li style="margin:20px; display:inline-block" onclick="frames['target'].location.href='one.html'; toggle_bgcolor(this);">One</li>
         <li style="margin:20px; display:inline-block" onclick="frames['target'].location.href='two.html'; toggle_bgcolor(this);">Two</li>
         <li style="margin:20px; display:inline-block" onclick="frames['target'].location.href='three.html'; toggle_bgcolor(this);">Three</li>
       </ul>
       <iframe id="target"></iframe>
    </div>
</body>

JS功能

function toggle_bgcolor(elem)
{
    for(var c=0; c<elem.parentNode.getElementsByTagName('li').length; c++)
    {
        elem.parentNode.getElementsByTagName('li')[c].style.backgroundColor='';
    }
    elem.style.backgroundColor='limegreen';
}

每个onclick元素中的<li>事件的 JS-block 将切换每个{{1}的 baclkground-color 单击另一个<li>时的元素。

选中 fiddle

导航标签保持一定的颜色

3 个答案:

使用以下内容：

html代码

JS功能