导航选项卡保持一定的颜色

Navigation tab stay a certain color

本文关键字：颜色 选项 导航      更新时间：2023-09-26

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

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

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

我已经有

一段时间没有玩过 asp 了，所以我不会有确切的术语，但我可以为你指出正确的方向。

首先，在母版页中，向所有导航链接添加唯一 ID。 这将使访问特定 asp 页中的这些链接变得微不足道。 这样做会有所帮助，因为否则很难选择所需的链接。 jQuery 例如 $("div ul li:nth-child('2')") 将选择第二个li，即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页面，这一行将是不同的 - 或者你可以让服务器端逻辑计算的东西。

你的问题有点不清楚。但是，如果我理解正确，如果您确定自己在当前页面上，我应该使用加载的特定 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>

这将为您的元素放置一个特殊的类。该类将具有悬停颜色，问题已解决。希望你能把它改编成asp。

使用以下内容：

网页代码

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

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

检查这个小提琴

相关文章：