Question

我确实意识到我想要实现的目标部分涵盖在“主题”中：How to change link colour of the current page

我已经彻底阅读了它，它已经解决了部分问题，但并未完全解决，

关于我的问题的背景信息 - 我有一个使用无序列表创建的导航栏，我有'hover'状态和'active'状态设置不同的背景颜色。

在'悬停'上，我的链接文字会将颜色从灰色变为白色，背景颜色会显示为灰色。
在“有效”状态下，背景颜色变为红色，文字保持白色。

我希望能够做的是让当前页面导航链接保持“活动”状态颜色方案。

从我已经完成的研究中，我已经能够将一个类应用到每个html页面上的“当前”链接，这样做解决了我的部分问题，让我当前的页面链接为红色背景，在class我已经定义了背景颜色和文本颜色，但只有背景颜色有效，文本颜色保持原始的灰色。

所以我的班级无法覆盖以前定义的文本颜色（不悬停或活动时）

我还尝试在当前链接上使用span标记来覆盖，但这远远超过了我的布局方案，这非常依赖于我已应用于'ul'和我的导航div中的'li'标签。

如果某人有一个实际的解决方案，我将非常感激，我愿意使用javascript，如果这将使事情变得更容易。因为我已经在我的网站上编写了脚本

以下是我的html和css属性片段：我需要做的就是让当前页面的文本保持白色。

Ben loader

#TopNav{
	height: 100px;
	width: 640px;
	float: right;
	background-color: #FFF;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 16px;
	font-weight: bold;
}

#TopNav ul{
	float: right;
	margin: 0px;
	padding: 0px;
	position: relative;
	list-style-type: none;
}

#TopNav ul li:first-child{
	float: left;
	border-left-style: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
}

#TopNav ul li{
	display: inline-block;
	float: left;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #EEE;
	margin-top: 30px;
	margin-bottom: 30px;
	line-height: 20px;
}

#TopNav ul li a{
	text-decoration: none;
	color: #676767;
	padding: 10px;
	display: block;
}

#TopNav ul li a:hover{
    background-color: #444444;
	color: #FFF;
}

#TopNav ul li a:active{
	background-color: #FF605A;
}

a.currentlink {
	background-color: #FF605A;
	color: #FFF;
}

  <nav id="TopNav">
    <ul>  
      <li><a class="currentlink" href="Home.html">Home</a></li><li>
      <a href="About.html">About</a></li><li>
      <a href="Services.html">Services</a></li><li>
      <a href="Music.html">Music</a></li><li>
      <a href="Videos.html">Videos</a></li><li>
      <a href="Resources.html">Resources</a></li><li>
      <a href="Contact.html">Contact</a></li> 
    </ul><!--end of ul -->
   </nav><!--end of TopNav-->

Answer 1

如果你共享一个公共标题，那么你可以使用php变量来实现你想要的。

示例：

<li <?php if($page == "home") echo "class='active'?>
<a href="#">Home</a>
</li>

<li <?php if($page == "about") echo "class='active'?>>
<a href="#">About</a>
</li>

然后在index.php中，您可以像这样设置变量：

<?php $page=="home" ?>

在您的关于我们页面中，您也可以这样做：

<?php $page=="about" ?>

然后你要做的就是设置链接，因为php已经处理了条件

CSS

 .active {....}

Answer 2

@Charles非常感谢

我使用了您在alt-web.com/Articles/Persistent-Page-Indicator.shtml上面发布的链接中的方法，但它仍然给了我与原来相同的结果。

但是在这样做的过程中，我允许我从我的CSS ID color: #676767;中删除#TopNav ul li a - 而只是在我的CSS中将链接颜色单独定义为a而不是#TopNav ul li并且问题解决了，它完美无缺，谢谢你推动正确的方向。

使'class'完全覆盖导航div颜色属性

2 个答案: