How does one style links for the current page differently from others? I would like to swap the colors of the text and background.
一个样式如何链接当前页面与其他页面不同？我想交换文字和背景的颜色。
HTML:
HTML：
<ul id="navigation">
<li class="a"><a href="/">Home</a></li>
<li class="b"><a href="theatre.php">Theatre</a></li>
<li class="c"><a href="programming.php">Programming</a></li>
</ul>
CSS:
CSS：
li a{
color:#A60500;
}
li a:hover{
color:#640200;
background-color:#000000;
}
11 个解决方案
#1
46
a:active : when you click on the link and hold it (active!).a:visited : when the link has already been visited.
a：活动：当您单击链接并按住它时（活动！）。 a：已访问：链接已被访问时。
If you want the link corresponding to the current page to be highlighted, you can define some specific style to the link -
如果您希望突出显示与当前页面对应的链接，您可以为链接定义一些特定样式 -
.currentLink {
color: #640200;
background-color: #000000;
}
Add this new class only to the corresponding li (link), either on server-side or on client-side (using JavaScript).
只在服务器端或客户端（使用JavaScript）将此新类添加到相应的li（链接）。
#2
66
With jQuery you could use the .each function to iterate through the links with the following code:
使用jQuery，您可以使用.each函数使用以下代码迭代链接：
$(document).ready(function() {
$("[href]").each(function() {
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
});
Depending on your page structure and used links, you may have to narrow down the selection of links like:
根据您的页面结构和使用的链接，您可能需要缩小选择范围，例如：
$("nav [href]").each ...
If you are using URL parameters, it may be necessary to strip these:
如果您使用的是URL参数，则可能需要删除以下内容：
if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...
This way you don't have to edit each page.
这样您就不必编辑每个页面。
#3
8
It is possible to achieve this without having to modify each page individually (adding a 'current' class to a specific link), but still without JS or a server-side script. This uses the :target pseudo selector, which relies on #someid appearing in the addressbar.
可以实现这一点，而无需单独修改每个页面（将“当前”类添加到特定链接），但仍然没有JS或服务器端脚本。这使用：target伪选择器，它依赖于地址栏中出现的#someid。
<!DOCTYPE>
<html>
<head>
<title>Some Title</title>
<style>
:target {
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li><a id="news" href="news.html#news">News</a></li>
<li><a id="games" href="games.html#games">Games</a></li>
<li><a id="science" href="science.html#science">Science</a></li>
</ul>
<h1>Stuff about science</h1>
<p>lorem ipsum blah blah</p>
</body>
</html>
There are a couple of restrictions:
有几个限制：
- If the page wasn't navigated to using one of these links it won't be coloured;
- 如果页面未导航到使用其中一个链接，则不会着色;
- The ids need to occur at the top of the page otherwise the page will jump down a bit when visited.
- ID需要出现在页面顶部，否则页面会在访问时跳过一点。
As long as any links to these pages include the id, and the navbar is at the top, it shouldn't be a problem.
只要这些页面的任何链接都包含id，并且导航栏位于顶部，它就不应该成为问题。
Other in-page links (bookmarks) will also cause the colour to be lost.
其他页内链接（书签）也会导致颜色丢失。
#4
2
a:link -> It defines the style for unvisited links.
a：link - >它定义了未访问链接的样式。
a:hover -> It defines the style for hovered links.
a：hover - >它定义了悬停链接的样式。
A link is hovered when the mouse moves over it.
当鼠标移过它时，链接会悬停。
#5
2
Best and easiest solution:
最好最简单的解决方案：
For each page you want your respective link to change color to until switched, put an internal style in EACH PAGE for the VISITED attribute and make each an individual class in order to differentiate between links so you don't apply the feature to all accidentally. We'll use white as an example:
对于每个页面，您希望各自的链接将颜色更改为切换，在VACHITED属性的每个页面中放置一个内部样式，并使每个页面成为一个单独的类，以区分链接，因此您不会意外地应用该功能。我们将以白色为例：
<style type="text/css">
.link1 a:visited {color:#FFFFFF;text-decoration:none;}
</style>
For all other attributes such as LINK, ACTIVE and HOVER, you can keep those in your style.css. You'll want to include a VISITED there as well for the color you want the link to turn back to when you click a different link.
对于所有其他属性，例如LINK，ACTIVE和HOVER，您可以将它们保存在style.css中。您还希望在此处包含VISITED，以获得您希望链接在您单击其他链接时返回的颜色。
#6
2
include this! on your page where you want to change the colors save as .php
包括这个！在您要更改颜色的页面上另存为.php
<?php include("includes/navbar.php"); ?>
then add a new file in an includes folder.
然后在includes文件夹中添加一个新文件。
includes/navbar.php
<div <?php //Using REQUEST_URI
$currentpage = $_SERVER['REQUEST_URI'];
if(preg_match("/index/i", $currentpage)||($currentpage=="/"))
echo " class=\"navbarorange/*the css class for your nav div*/\" ";
elseif(preg_match("/about/*or second page name*//i", $currentpage))
echo " class=\"navbarpink\" ";
elseif(preg_match("/contact/* or edit 3rd page name*//i", $currentpage))
echo " class=\"navbargreen\" ";?> >
</div>
#7
2
N 1.1's answer is correct. In addition, I've written a small JavaScript function to extract the current link from a list, which will save you the trouble of modifying each page to know its current link.
N 1.1的答案是正确的。另外，我编写了一个小的JavaScript函数来从列表中提取当前链接，这将为您节省修改每个页面以了解其当前链接的麻烦。
<script type="text/javascript">
function getCurrentLinkFrom(links){
var curPage = document.URL;
curPage = curPage.substr(curPage.lastIndexOf("/")) ;
links.each(function(){
var linkPage = $(this).attr("href");
linkPage = linkPage.substr(linkPage.lastIndexOf("/"));
if (curPage == linkPage){
return $(this);
}
});
};
$(document).ready(function(){
var currentLink = getCurrentLinkFrom($("navbar a"));
currentLink.addClass("current_link") ;
});
</script>
#8
2
JavaScript will get the job done.
Get all links in the document and compare their reference URLs to the document's URL. If there is a match, add a class to that link.
获取文档中的所有链接，并将其参考URL与文档的URL进行比较。如果匹配，请向该链接添加一个类。
JavaScript
JavaScript的
<script>
currentLinks = document.querySelectorAll('a[href="'+document.URL+'"]')
currentLinks.forEach(function(link) {
link.className += ' current-link')
});
</script>
One Liner Version of Above
上面的一个衬里版本
document.querySelectorAll('a[href="'+document.URL+'"]').forEach(function(elem){elem.className += ' current-link')});
CSS
CSS
.current-link {
color:#baada7;
}
Other Notes
其他说明
Taraman's jQuery answer above only searches on [href] which will return link tags and tags other than a which rely on the href attribute. Searching on a[href='*https://urlofcurrentpage.com*'] captures only those links which meets the criteria and therefore runs faster.
Taraman上面的jQuery回答仅搜索[href]，它将返回除依赖href属性的链接标记和标记之外的链接标记和标记。搜索[href ='* https：//urlofcurrentpage.com*']仅捕获符合条件的链接，因此运行速度更快。
In addtion, if you don't need to rely on the jQuery library, a vanilla JavaScript solution is definitely the way to go.
另外，如果您不需要依赖jQuery库，那么一个普通的JavaScript解决方案绝对是您的选择。
#9
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<style type="text/css"><!--
.class1 A:link {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 4px solid #333333; border-right: 4px solid #333333; border-top: 3px solid #333333; border-bottom: 4px solid #333333;}
.class1 A:visited {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 4px solid #333333; border-right: 4px solid #333333; border-top: 3px solid #333333; border-bottom: 4px solid #333333;}
.class1 A:hover {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 3px solid #0000FF; border-right: 3px solid #0000FF; border-top: 2px solid #0000FF; border-bottom: 2px solid #0000FF;}
.class1 A:active {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 3px solid #0000FF; border-right: 3px solid #0000FF; border-top: 2px solid #0000FF; border-bottom: 2px solid #0000FF;}
#nav_menu .current {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 3px solid #FF0000; border-right: 3px solid #FF0000; border-top: 2px solid #FF0000; border-bottom: 2px solid #FF0000;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}
--></style>
</head>
<body style="background:#000000 url('...../images/bg.jpg') repeat-y top center fixed; width="100%" align="center">
<table style="table-layout:fixed; border:0px" width=100% height=100% border=0 cellspacing=0 cellpadding=0 align=center><tr>
<td style="background: url(...../images/menu_bg-menu.jpg) center no-repeat;" "border:0px" width="100%" height="100%" align="center" valign="middle">
<span class="class1" id="nav_menu">
<a href="http://Yourhomepage-url.com/" ***class="current"*** target="_parent"><font face="Georgia" color="#0000FF" size="2"><b> Home </b></font></a>
<a href="http://Yourhomepage-url.com/yourfaqspage-url.php_or_.html" target="_parent"><font face="Georgia" color="#0000FF" size="2"><b> FAQs page </b></font></a>
<a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" target="_parent"><font face="Georgia" color="#0000FF" size="2"><b> About </b></font></a>
<a href="http://Yourhomepage-url.com/yourcontactpage-url.php_or_.html" target="_parent"><font face="Georgia" color="#0000FF" size="2"><b> Contact </b></font></a>
</span>
</td></tr></table></body></html>
Note: the style goes in between the head tag (<head> .... </head>) and the class="class1" and the id="nav_menu" goes in the ie: (-- <span class="class1" id="nav_menu"> --).
注意：样式介于头标记（ .... ）和class =“class1”之间，id =“nav_menu”位于ie：（ - - ）。
Then the last class attribute (class="current") goes in the hyper-link code of the link in the page that you want the active current link to correspond to.
然后最后一个类属性（class =“current”）进入您希望活动当前链接对应的页面中链接的超链接代码。
Example: You want the link tab to stay active or highlighted when it's correspondent page is whats currently in view, go to that page itself and place the class="current" attribute by it's link's html code. Only in the page that corresponds to the link so that when ever that page is at view, the tab will stay highlighted or stand out different from the rest of the tabs.
示例：您希望链接选项卡保持活动状态或突出显示当对应页面当前处于查看状态时，转到该页面本身并通过其链接的html代码放置class =“current”属性。仅在与链接对应的页面中，以便当该页面处于查看状态时，该选项卡将保持突出显示或与其他选项卡不同。
For the Home page, go to the home page and place the class in it. example: <a href="http://Yourhomepage-url.com/" class="current" target="_parent">
For the About page, go to the about page and place the class in it. example: <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" class="current" target="_parent">
对于“关于”页面，请转到“关于”页面并将该类放入其中。示例：
For the Contact page, go to the contact page and place the class in it. example: <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" class="current" target="_parent">
etc ......
等......
Notice the example Table above;- Lets assume this was the Home page, so on this page, only the Home url link section has the class="current"
请注意上面的示例表; - 假设这是主页，因此在此页面上，只有Home url链接部分具有class =“current”
Sorry for any meaning-less error, am not a prof. but this worked for me and displays fine in almost all the browsers tested, including ipad, and smart phones. Hope this will help some-one out here because is very frustrating to want to and not able to. I had tried so had to get to this, and so far it's good for me.
对不起任何没有意义的错误，我不是教授。但这对我有用，几乎在所有测试的浏览器中都能正常显示，包括ipad和智能手机。希望这会帮助一些人在这里因为非常沮丧想要而且不能。我曾尝试过这样做，到目前为止它对我有好处。
#10
1
@Presto Thanks! Yours worked perfectly for me, but I came up with a simpler version to save changing everything around.
@Presto谢谢！你的工作对我来说很完美，但我想出了一个更简单的版本来保存改变周围的一切。
Add a <span> tag around the desired link text, specifying class within. (e.g. home tag)
在所需的链接文本周围添加标记，指定其中的类。 （例如家庭标签）
<nav id="top-menu">
<ul>
<li> <a href="home.html"><span class="currentLink">Home</span></a> </li>
<li> <a href="about.html">About</a> </li>
<li> <a href="cv.html">CV</a> </li>
<li> <a href="photos.html">Photos</a> </li>
<li> <a href="archive.html">Archive</a> </li>
<li> <a href="contact.html">Contact</a></li>
</ul>
</nav>
Then edit your CSS accordingly:
然后相应地编辑你的CSS：
.currentLink {
color:#baada7;
}
#11
-1
So for example if you are trying to change the text of the anchor on the current page that you are on only using CSS, then here is a simple solution.
因此，例如，如果您尝试仅使用CSS更改当前页面上的锚点文本，那么这是一个简单的解决方案。
I want to change the the anchor text colour on my software page to light blue:
我想将软件页面上的锚文本颜色更改为浅蓝色：
<div class="navbar">
<ul>
<a href="../index.html"><li>Home</li></a>
<a href="usefulsites.html"><li>Useful Sites</li></a>
<a href="software.html"><li class="currentpage">Software</li></a>
<a href="workbench.html"><li>The Workbench</li></a>
<a href="contact.php"><li>Contact</a></li></a>
</ul>
</div>
And before anyone says that I got the <li> tags and the <a> tags mixed up, this is what makes it work as you are applying the value to the text itself only when you are on that page. Unfortunately, if you are using PHP to input header tags, then this will not work for obvious reasons. Then I put this in my style.css, with all my pages using the same style sheet:
在有人说我得到了
.currentpage {
color: lightblue;
}
#1
46
a:active : when you click on the link and hold it (active!).a:visited : when the link has already been visited.
a：活动：当您单击链接并按住它时（活动！）。 a：已访问：链接已被访问时。
If you want the link corresponding to the current page to be highlighted, you can define some specific style to the link -
如果您希望突出显示与当前页面对应的链接，您可以为链接定义一些特定样式 -
.currentLink {
color: #640200;
background-color: #000000;
}
Add this new class only to the corresponding li (link), either on server-side or on client-side (using JavaScript).
只在服务器端或客户端（使用JavaScript）将此新类添加到相应的li（链接）。
#2
66
With jQuery you could use the .each function to iterate through the links with the following code:
使用jQuery，您可以使用.each函数使用以下代码迭代链接：
$(document).ready(function() {
$("[href]").each(function() {
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
});
Depending on your page structure and used links, you may have to narrow down the selection of links like:
根据您的页面结构和使用的链接，您可能需要缩小选择范围，例如：
$("nav [href]").each ...
If you are using URL parameters, it may be necessary to strip these:
如果您使用的是URL参数，则可能需要删除以下内容：
if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...
This way you don't have to edit each page.
这样您就不必编辑每个页面。
#3
8
It is possible to achieve this without having to modify each page individually (adding a 'current' class to a specific link), but still without JS or a server-side script. This uses the :target pseudo selector, which relies on #someid appearing in the addressbar.
可以实现这一点，而无需单独修改每个页面（将“当前”类添加到特定链接），但仍然没有JS或服务器端脚本。这使用：target伪选择器，它依赖于地址栏中出现的#someid。
<!DOCTYPE>
<html>
<head>
<title>Some Title</title>
<style>
:target {
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li><a id="news" href="news.html#news">News</a></li>
<li><a id="games" href="games.html#games">Games</a></li>
<li><a id="science" href="science.html#science">Science</a></li>
</ul>
<h1>Stuff about science</h1>
<p>lorem ipsum blah blah</p>
</body>
</html>
There are a couple of restrictions:
有几个限制：
- If the page wasn't navigated to using one of these links it won't be coloured;
- 如果页面未导航到使用其中一个链接，则不会着色;
- The ids need to occur at the top of the page otherwise the page will jump down a bit when visited.
- ID需要出现在页面顶部，否则页面会在访问时跳过一点。
As long as any links to these pages include the id, and the navbar is at the top, it shouldn't be a problem.
只要这些页面的任何链接都包含id，并且导航栏位于顶部，它就不应该成为问题。
Other in-page links (bookmarks) will also cause the colour to be lost.
其他页内链接（书签）也会导致颜色丢失。
#4
2
a:link -> It defines the style for unvisited links.
a：link - >它定义了未访问链接的样式。
a:hover -> It defines the style for hovered links.
a：hover - >它定义了悬停链接的样式。
A link is hovered when the mouse moves over it.
当鼠标移过它时，链接会悬停。
#5
2
Best and easiest solution:
最好最简单的解决方案：
For each page you want your respective link to change color to until switched, put an internal style in EACH PAGE for the VISITED attribute and make each an individual class in order to differentiate between links so you don't apply the feature to all accidentally. We'll use white as an example:
对于每个页面，您希望各自的链接将颜色更改为切换，在VACHITED属性的每个页面中放置一个内部样式，并使每个页面成为一个单独的类，以区分链接，因此您不会意外地应用该功能。我们将以白色为例：
<style type="text/css">
.link1 a:visited {color:#FFFFFF;text-decoration:none;}
</style>
For all other attributes such as LINK, ACTIVE and HOVER, you can keep those in your style.css. You'll want to include a VISITED there as well for the color you want the link to turn back to when you click a different link.
对于所有其他属性，例如LINK，ACTIVE和HOVER，您可以将它们保存在style.css中。您还希望在此处包含VISITED，以获得您希望链接在您单击其他链接时返回的颜色。
#6
2
include this! on your page where you want to change the colors save as .php
包括这个！在您要更改颜色的页面上另存为.php
<?php include("includes/navbar.php"); ?>
then add a new file in an includes folder.
然后在includes文件夹中添加一个新文件。
includes/navbar.php
<div <?php //Using REQUEST_URI
$currentpage = $_SERVER['REQUEST_URI'];
if(preg_match("/index/i", $currentpage)||($currentpage=="/"))
echo " class=\"navbarorange/*the css class for your nav div*/\" ";
elseif(preg_match("/about/*or second page name*//i", $currentpage))
echo " class=\"navbarpink\" ";
elseif(preg_match("/contact/* or edit 3rd page name*//i", $currentpage))
echo " class=\"navbargreen\" ";?> >
</div>
#7
2
N 1.1's answer is correct. In addition, I've written a small JavaScript function to extract the current link from a list, which will save you the trouble of modifying each page to know its current link.
N 1.1的答案是正确的。另外，我编写了一个小的JavaScript函数来从列表中提取当前链接，这将为您节省修改每个页面以了解其当前链接的麻烦。
<script type="text/javascript">
function getCurrentLinkFrom(links){
var curPage = document.URL;
curPage = curPage.substr(curPage.lastIndexOf("/")) ;
links.each(function(){
var linkPage = $(this).attr("href");
linkPage = linkPage.substr(linkPage.lastIndexOf("/"));
if (curPage == linkPage){
return $(this);
}
});
};
$(document).ready(function(){
var currentLink = getCurrentLinkFrom($("navbar a"));
currentLink.addClass("current_link") ;
});
</script>
#8
2
JavaScript will get the job done.
Get all links in the document and compare their reference URLs to the document's URL. If there is a match, add a class to that link.
获取文档中的所有链接，并将其参考URL与文档的URL进行比较。如果匹配，请向该链接添加一个类。
JavaScript
JavaScript的
<script>
currentLinks = document.querySelectorAll('a[href="'+document.URL+'"]')
currentLinks.forEach(function(link) {
link.className += ' current-link')
});
</script>
One Liner Version of Above
上面的一个衬里版本
document.querySelectorAll('a[href="'+document.URL+'"]').forEach(function(elem){elem.className += ' current-link')});
CSS
CSS
.current-link {
color:#baada7;
}
Other Notes
其他说明
Taraman's jQuery answer above only searches on [href] which will return link tags and tags other than a which rely on the href attribute. Searching on a[href='*https://urlofcurrentpage.com*'] captures only those links which meets the criteria and therefore runs faster.
Taraman上面的jQuery回答仅搜索[href]，它将返回除依赖href属性的链接标记和标记之外的链接标记和标记。搜索[href ='* https：//urlofcurrentpage.com*']仅捕获符合条件的链接，因此运行速度更快。
In addtion, if you don't need to rely on the jQuery library, a vanilla JavaScript solution is definitely the way to go.
另外，如果您不需要依赖jQuery库，那么一个普通的JavaScript解决方案绝对是您的选择。
#9
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<style type="text/css"><!--
.class1 A:link {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 4px solid #333333; border-right: 4px solid #333333; border-top: 3px solid #333333; border-bottom: 4px solid #333333;}
.class1 A:visited {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 4px solid #333333; border-right: 4px solid #333333; border-top: 3px solid #333333; border-bottom: 4px solid #333333;}
.class1 A:hover {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 3px solid #0000FF; border-right: 3px solid #0000FF; border-top: 2px solid #0000FF; border-bottom: 2px solid #0000FF;}
.class1 A:active {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 3px solid #0000FF; border-right: 3px solid #0000FF; border-top: 2px solid #0000FF; border-bottom: 2px solid #0000FF;}
#nav_menu .current {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 3px solid #FF0000; border-right: 3px solid #FF0000; border-top: 2px solid #FF0000; border-bottom: 2px solid #FF0000;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}
--></style>
</head>
<body style="background:#000000 url('...../images/bg.jpg') repeat-y top center fixed; width="100%" align="center">
<table style="table-layout:fixed; border:0px" width=100% height=100% border=0 cellspacing=0 cellpadding=0 align=center><tr>
<td style="background: url(...../images/menu_bg-menu.jpg) center no-repeat;" "border:0px" width="100%" height="100%" align="center" valign="middle">
<span class="class1" id="nav_menu">
<a href="http://Yourhomepage-url.com/" ***class="current"*** target="_parent"><font face="Georgia" color="#0000FF" size="2"><b> Home </b></font></a>
<a href="http://Yourhomepage-url.com/yourfaqspage-url.php_or_.html" target="_parent"><font face="Georgia" color="#0000FF" size="2"><b> FAQs page </b></font></a>
<a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" target="_parent"><font face="Georgia" color="#0000FF" size="2"><b> About </b></font></a>
<a href="http://Yourhomepage-url.com/yourcontactpage-url.php_or_.html" target="_parent"><font face="Georgia" color="#0000FF" size="2"><b> Contact </b></font></a>
</span>
</td></tr></table></body></html>
Note: the style goes in between the head tag (<head> .... </head>) and the class="class1" and the id="nav_menu" goes in the ie: (-- <span class="class1" id="nav_menu"> --).
注意：样式介于头标记（ .... ）和class =“class1”之间，id =“nav_menu”位于ie：（ - - ）。
Then the last class attribute (class="current") goes in the hyper-link code of the link in the page that you want the active current link to correspond to.
然后最后一个类属性（class =“current”）进入您希望活动当前链接对应的页面中链接的超链接代码。
Example: You want the link tab to stay active or highlighted when it's correspondent page is whats currently in view, go to that page itself and place the class="current" attribute by it's link's html code. Only in the page that corresponds to the link so that when ever that page is at view, the tab will stay highlighted or stand out different from the rest of the tabs.
示例：您希望链接选项卡保持活动状态或突出显示当对应页面当前处于查看状态时，转到该页面本身并通过其链接的html代码放置class =“current”属性。仅在与链接对应的页面中，以便当该页面处于查看状态时，该选项卡将保持突出显示或与其他选项卡不同。
For the Home page, go to the home page and place the class in it. example: <a href="http://Yourhomepage-url.com/" class="current" target="_parent">
For the About page, go to the about page and place the class in it. example: <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" class="current" target="_parent">
对于“关于”页面，请转到“关于”页面并将该类放入其中。示例：
For the Contact page, go to the contact page and place the class in it. example: <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" class="current" target="_parent">
etc ......
等......
Notice the example Table above;- Lets assume this was the Home page, so on this page, only the Home url link section has the class="current"
请注意上面的示例表; - 假设这是主页，因此在此页面上，只有Home url链接部分具有class =“current”
Sorry for any meaning-less error, am not a prof. but this worked for me and displays fine in almost all the browsers tested, including ipad, and smart phones. Hope this will help some-one out here because is very frustrating to want to and not able to. I had tried so had to get to this, and so far it's good for me.
对不起任何没有意义的错误，我不是教授。但这对我有用，几乎在所有测试的浏览器中都能正常显示，包括ipad和智能手机。希望这会帮助一些人在这里因为非常沮丧想要而且不能。我曾尝试过这样做，到目前为止它对我有好处。
#10
1
@Presto Thanks! Yours worked perfectly for me, but I came up with a simpler version to save changing everything around.
@Presto谢谢！你的工作对我来说很完美，但我想出了一个更简单的版本来保存改变周围的一切。
Add a <span> tag around the desired link text, specifying class within. (e.g. home tag)
在所需的链接文本周围添加标记，指定其中的类。 （例如家庭标签）
<nav id="top-menu">
<ul>
<li> <a href="home.html"><span class="currentLink">Home</span></a> </li>
<li> <a href="about.html">About</a> </li>
<li> <a href="cv.html">CV</a> </li>
<li> <a href="photos.html">Photos</a> </li>
<li> <a href="archive.html">Archive</a> </li>
<li> <a href="contact.html">Contact</a></li>
</ul>
</nav>
Then edit your CSS accordingly:
然后相应地编辑你的CSS：
.currentLink {
color:#baada7;
}
#11
-1
So for example if you are trying to change the text of the anchor on the current page that you are on only using CSS, then here is a simple solution.
因此，例如，如果您尝试仅使用CSS更改当前页面上的锚点文本，那么这是一个简单的解决方案。
I want to change the the anchor text colour on my software page to light blue:
我想将软件页面上的锚文本颜色更改为浅蓝色：
<div class="navbar">
<ul>
<a href="../index.html"><li>Home</li></a>
<a href="usefulsites.html"><li>Useful Sites</li></a>
<a href="software.html"><li class="currentpage">Software</li></a>
<a href="workbench.html"><li>The Workbench</li></a>
<a href="contact.php"><li>Contact</a></li></a>
</ul>
</div>
And before anyone says that I got the <li> tags and the <a> tags mixed up, this is what makes it work as you are applying the value to the text itself only when you are on that page. Unfortunately, if you are using PHP to input header tags, then this will not work for obvious reasons. Then I put this in my style.css, with all my pages using the same style sheet:
在有人说我得到了
.currentpage {
color: lightblue;
}