Question

当单击页面链接时，如何更改另一页面中同一菜单的链接的颜色？

这是主页，帮助页面和联系页面中的菜单：

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/help">Help</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

/ *访问前链接* /

nav ul li a {
  color: #000;
}

/ * * /

之后

nav ul li a:visited {
  color: #00ff78;
}

访问过的菜单中的所有链接都是相同的颜色，但是我希望活动链接仅更改颜色。

Answer 1

尝试一下：

nav ul li a:hover {
  color: hotpink;
}

/* selected link */
nav ul li a:active {
  color: blue;
}

Answer 2

请尝试使用此代码。

JQUERY

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    $('body').on('click','nav a',function() {
        $(this).addClass("active");
        $(this).parent().siblings().find('.active').removeClass();
    });
</script>

CSS

a.active {
    color: red;
}

Answer 3

这应该有效：

nav ul li a {
  color: #000;
}
nav ul li a:active{
  color: #00ff78;
}

如果只希望当前页面的链接，则需要使用active。访问过的页面将永久性地触发以前使用的任何链接。

Answer 4

如果我单击“主页”，则将在所有其他页面上激活主页菜单

帮助页面和联系页面相同

单击页面的链接时，更改另一页面中同一菜单的链接的颜色

4 个答案: