当前页面的一种样式链接与其他页面的链接方式有何不同？我想交换文字和背景的颜色。
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：
li a{
color:#A60500;
}
li a:hover{
color:#640200;
background-color:#000000;
}
答案 0 :(得分：69)
使用jQuery，您可以使用.each函数使用以下代码迭代链接：
$(document).ready(function() {
$("[href]").each(function() {
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
});
根据您的网页结构和使用的链接，您可能需要缩小选择范围，例如：
$("nav [href]").each ...
如果您使用的是URL参数，则可能需要删除这些参数：
if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...
这样您就不必编辑每个页面了。
答案 1 :(得分：47)
a:active：当您点击链接并按住它时（活跃！）。
a:visited：链接已被访问时。
如果您希望突出显示与当前页面对应的链接，您可以为链接定义一些特定样式 -
.currentLink {
color: #640200;
background-color: #000000;
}
仅在服务器端或客户端（使用JavaScript）将此新类添加到相应的li（链接）。
答案 2 :(得分：9)
可以实现这一点，而无需单独修改每个页面（将“当前”类添加到特定链接），但仍然没有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>
有一些限制：
只要这些页面的任何链接都包含id，并且导航栏位于顶部，就不会有问题。
其他页内链接（书签）也会导致颜色丢失。
答案 3 :(得分：3)
获取文档中的所有链接，并将其参考URL与文档的URL进行比较。如果匹配，请在该链接中添加一个类。
<强>的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
.current-link {
color:#baada7;
}
其他笔记
Taraman上面的jQuery答案只会在[href]上进行搜索，这会返回link以外的a标签以及依赖href属性的a[href='*https://urlofcurrentpage.com*']标签。在<ion-item>
<ion-label stacked>Select long text</ion-label>
<ion-select>
<ion-option value="opt1">Very very long text</ion-option>
</ion-select>
</ion-item>
上搜索仅捕获符合条件的链接，因此运行速度更快。
另外，如果你不需要依赖jQuery库，那么一个普通的JavaScript解决方案绝对是你的选择。
答案 4 :(得分：2)
a:link - ＆gt;它定义了未访问链接的样式。
a:hover - ＆gt;它定义了悬停链接的样式。
当鼠标移过链接时，链接会悬停。
答案 5 :(得分：2)
包括这个！在您要更改颜色的页面上另存为.php
<?php include("includes/navbar.php"); ?>
然后在包含文件夹中添加新文件。
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>
答案 6 :(得分：2)
最佳和最简单的解决方案：
对于每个页面，您希望各自的链接将颜色更改为切换，在VACHITED属性的每个页面中放置一个内部样式，并使每个页面成为一个单独的类，以便区分链接，这样您就不会将该功能应用于一切都是偶然的。我们将以白色为例：
<style type="text/css">
.link1 a:visited {color:#FFFFFF;text-decoration:none;}
</style>
对于所有其他属性，例如LINK，ACTIVE和HOVER，您可以将它们保存在style.css中。您还希望在其中包含一个VISITED，以获得您希望链接在您单击其他链接时返回的颜色。
答案 7 :(得分：2)
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 :(得分：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>
注意：样式介于head标记（<head> .... </head>）和class =“class1”之间，id =“nav_menu”位于ie：（ - <span class="class1" id="nav_menu"> - ）
然后，最后一个类属性（ class =“current”）会出现在您希望活动当前链接对应的页面中链接的超链接代码中。
示例：您希望链接标签在其对应页面当前处于显示状态时保持活动或突出显示，转到该页面本身并通过其链接的html放置 class =“current”属性码。仅在与链接对应的页面中，以便当该页面处于查看状态时，该选项卡将保持突出显示或与其他选项卡不同。
对于主页，请转到主页并将课程放入其中。例如：<a href="http://Yourhomepage-url.com/" class="current" target="_parent">
对于“关于”页面，请转到“关于”页面并将该课程放入其中。例如：<a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" class="current" target="_parent">
对于“联系”页面，请转到联系页面并将课程放入其中。例如：<a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" class="current" target="_parent">
请注意上面的示例表; - 假设这是主页，因此在此页面上，只有主网址链接部分具有class =“current”
对于任何没有意义的错误感到抱歉，我不是教授。但这对我有用，几乎在所有测试过的浏览器中都能正常显示，包括ipad和智能手机。希望这会帮助一些人在这里因为非常沮丧想要而且不能。我曾尝试过这样做，但到目前为止它对我有好处。
答案 9 :(得分：1)
@Presto 谢谢！你的工作对我来说很完美，但我想出了一个更简单的版本来保存改变周围的一切。
在所需的链接文本周围添加<span>标记，指定其中的类。 （例如家庭标签）
<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>
然后相应地编辑你的CSS：
.currentLink {
color:#baada7;
}
答案 10 :(得分：0)
您不需要jQuery就可以做到这一点！您只需要一个很小且非常轻便的原始Javascript和一个CSS类（如上述所有答案中所示）：
首先在样式表中定义一个名为current的CSS类。
第二次在您现有的JavaScript文件中或在单独的js脚本文件中添加以下纯JavaScript（但在页面顶部将脚本年龄链接添加到它）或仅将其添加到script标签中在结束标签之前，它在所有这些情况下仍然有效。
function highlightCurrent() {
const curPage = document.URL;
const links = document.getElementsByTagName('a');
for (let link of links) {
if (link.href == curPage) {
link.classList.add("current");
}
}
}
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
highlightCurrent()
}
};
当前链接的'href'属性应为document.URL所提供的绝对路径（console.log以确保它是相同的）
答案 11 :(得分：0)
使用单个类名，例如class =“ active”，然后仅将其添加到当前页面，而不是所有页面。如果您在家，则如下所示：
<ul id="navigation">
<li class="active"><a href="/">Home</a></li>
<li class=""><a href="theatre.php">Theatre</a></li>
<li class=""><a href="programming.php">Programming</a></li>
</ul>
和您的CSS一样
li.active{
color: #640200;
}
答案 12 :(得分：-1)
因此，例如，如果您尝试仅使用CSS更改当前页面上的锚点文本，那么这是一个简单的解决方案。
我想将软件页面上的锚文本颜色更改为浅蓝色：
<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>
在有人说我得到<li>标签并且<a>标签混淆之前，这就是它的工作原理，因为只有当你在那里时才将值应用于文本本身页。不幸的是，如果你使用PHP来输入标题标签，那么这显然不会起作用。
然后我把它放在我的style.css中，我的所有页面使用相同的样式表：
.currentpage {
color: lightblue;
}