代码之家 › 专栏 › 技术社区 › Josh Curren

用CSS更改当前网页的链接颜色

css html javascript

Josh Curren · 技术社区 · 16 年前

当前页面的一个样式链接与其他样式链接有何不同?我想交换文本和背景的颜色。

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

12 回复 | 直到 7 年前

Nisse Engström sting_roc 9 年前

a:active :当您单击并按住链接时( 活跃! )
a:visited :当链接已被访问时。

如果要突出显示与当前页面对应的链接,可以定义链接的某些特定样式。-

.currentLink {
   color: #640200;
   background-color: #000000;
}

只将这个新类添加到相应的 li (link),在服务器端或客户端(使用javascript)。

Nisse Engström sting_roc 9 年前

使用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]) ...

这样就不必编辑每一页。

Andy G 11 年前

可以在不需要单独修改每个页面的情况下实现这一点(向特定链接添加“当前”类),但仍然不需要JS或服务器端脚本。它使用 :目标 伪选择器,它依赖于 #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必须出现在页面顶部,否则访问时,页面将向下跳一点。

只要到这些页面的任何链接都包含ID,导航栏在顶部,就不会有问题。

其他页面内链接(书签)也会导致颜色丢失。

Govind Rai G07cha 8 年前

Javascript将完成这项工作。

获取文档中的所有链接,并将其引用URL与文档的URL进行比较。如果有匹配项,请向该链接添加类。

javascript

<script>
    currentLinks = document.querySelectorAll('a[href="'+document.URL+'"]')
    currentLinks.forEââach(function(link) {
        link.className += ' current-link')
    });
</script>

One Liner Version of Above

document.querySelectorAll('a[href="'+document.URL+'"]').forEââach(function(elem){eââlem.className += ' current-link')});

CSS

.current-link {
    color:#baada7;
}

其他注意事项

上面Taraman的jquery答案只搜索 [href] 哪个会回来 link 除 a 它依赖于 href 属性。正在搜索 a[href='*https://urlofcurrentpage.com*'] 只捕获那些符合条件的链接,因此运行速度更快。

另外,如果您不需要依赖jquery库,那么一个普通的javascript解决方案绝对是可行的。

rekha_sri 16 年前

a:link ->它定义未访问链接的样式。

a:hover ->它定义悬停链接的样式。

当鼠标移动到链接上时,链接将悬停。

greg 13 年前

最佳和最简单的解决方案:

对于每个希望各自链接更改颜色直至切换的页面,在每个页面中为“已访问”属性设置一个内部样式,并使每个页面成为单独的类,以便区分链接,这样就不会意外地将该功能应用于所有页面。我们将以白色为例:

<style type="text/css">
.link1 a:visited {color:#FFFFFF;text-decoration:none;} 
</style>

对于链接、活动和悬停等所有其他属性,您可以将它们保留在style.css中。当您单击另一个链接时,您还需要包含一个访问过的链接,以及链接要返回到的颜色。

Bruno Vieira 13 年前

包括这个!在您要更改颜色的页面上另存为.php

<?php include("includes/navbar.php"); ?>

然后在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>

Alex sashkello 13 年前

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>

Martijn Pieters 9 年前

<!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>&nbsp;&nbsp;Home&nbsp;&nbsp;</b></font></a>

&nbsp;&nbsp;

<a href="http://Yourhomepage-url.com/yourfaqspage-url.php_or_.html" target="_parent"><font face="Georgia" color="#0000FF" size="2"><b>&nbsp;&nbsp;FAQs page&nbsp;&nbsp;</b></font></a>

&nbsp;&nbsp;

<a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" target="_parent"><font face="Georgia" color="#0000FF" size="2"><b>&nbsp;&nbsp;About&nbsp;&nbsp;</b></font></a>

&nbsp;&nbsp;

<a href="http://Yourhomepage-url.com/yourcontactpage-url.php_or_.html" target="_parent"><font face="Georgia" color="#0000FF" size="2"><b>&nbsp;&nbsp;Contact&nbsp;&nbsp;</b></font></a>
</span>

</td></tr></table></body></html>

注意:样式位于标题标记之间( <head> .... </head> )class=“class1”和id=“nav_”菜单进入IE:。-- <span class="class1" id="nav_menu"> -)

那么最后一个类属性( class=“当前” )进入当前活动链接所对应的网页中链接的超链接代码。

示例:当“链接”选项卡的对应页处于当前视图中时,希望它保持活动或突出显示,请转到该页本身并将 class=“当前” 属性的链接的HTML代码。只有在与链接相对应的页面中,当该页面处于查看状态时,选项卡才会保持突出显示或与其他选项卡不同。

对于主页 ,转到主页并将类放入其中。例子: <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_或_u.html”class=“current”target=“_parent”>

等。。。。。。

注意上面的示例表;-假设这是主页,所以在这个页面上,只有主页URL链接部分具有class=“current”

很抱歉,我不是教授,但这对我很有效,几乎所有测试过的浏览器都显示良好,包括iPad和智能手机。希望这能帮助一些人在这里,因为是非常令人沮丧的想和不能。我试过这么做了,到目前为止这对我有好处。

Nisse Engström sting_roc 9 年前

@普雷斯托谢谢!你的版本对我来说很好,但是我想出了一个更简单的版本来省去改变周围的一切。

添加一个 <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;
}

Mohsen Kadoura 7 年前

您不需要jquery就可以做到这一点!您所需要的只是一个非常小和非常轻的普通JavaScript和一个CSS类(如上面所有的答案所示):

首先在样式表中定义一个称为current的CSS类。
其次,在现有的javascript文件或单独的JS脚本文件中添加以下纯javascript(但在页面的头部添加script tage链接),或者事件只在结束body标记之前将其添加到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它以确保它是相同的)

-1

Nisse Engström sting_roc 9 年前

例如,如果您试图更改当前页面上仅使用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;
}