0

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

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

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

4

3 回答 3

1

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

首先，在您的母版页中，为您的所有导航链接添加唯一 ID。这将使访问特定asp页面中的这些链接变得微不足道。这样做会有所帮助，因为否则很难选择您想要的链接。jQuery 之类的$("div ul li:nth-child('2')")将选择第二个li是 a 的子级的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 类“悬停”添加到它。

显然，对于每个特定的 asp 页面，这条线会有所不同 - 或者您可以让您的服务器端逻辑计算。

于 2013-10-18T16:09:20.940 回答
0

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

于 2013-10-18T16:00:07.587 回答
0

使用以下内容：

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

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

检查这个小提琴

于 2013-10-19T06:54:52.677 回答