web-dev-qa-db-fra.com

Changer la couleur du lien de la page en cours avec CSS

Comment un style relie-t-il la page actuelle différemment des autres? J'aimerais échanger les couleurs du texte et de l'arrière-plan.

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;
}
javascripthtmlcss
40
Josh Curren

a:active: lorsque vous cliquez sur le lien et que vous le maintenez ( actif! ).
a:visited: lorsque le lien a déjà été visité. 

Si vous souhaitez que le lien correspondant à la page en cours soit mis en surbrillance, vous pouvez définir un style spécifique pour le lien - 

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

Ajoutez cette nouvelle classe uniquement à la li (lien) correspondante, côté serveur ou côté client (à l'aide de JavaScript).

47
N 1.1

Avec jQuery, vous pouvez utiliser la fonction .each pour parcourir les liens avec le code suivant:

$(document).ready(function() {
    $("[href]").each(function() {
        if (this.href == window.location.href) {
            $(this).addClass("active");
        }
    });
});

En fonction de la structure de votre page et des liens utilisés, vous devrez peut-être restreindre la sélection de liens tels que:

$("nav [href]").each ...

Si vous utilisez des paramètres d'URL, il peut être nécessaire de supprimer ceux-ci:

if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...

De cette façon, vous n'avez pas à éditer chaque page.

69
Taraman

Il est possible d'y parvenir sans avoir à modifier chaque page individuellement (en ajoutant une classe "actuelle" à un lien spécifique), mais toujours sans JS ou script côté serveur. Ceci utilise le sélecteur: target pseudo, qui repose sur #someid qui apparaît dans la barre d’adresses.

<!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>

Il y a quelques restrictions:

  • Si la page n'a pas été utilisée pour utiliser l'un de ces liens, elle ne sera pas colorée.
  • Les identifiants doivent apparaître en haut de la page, sinon la page sautera un peu lors de la visite.

Tant que tous les liens vers ces pages incluent l'identifiant et que la barre de navigation est en haut, cela ne devrait pas poser de problème.

D'autres liens dans la page (signets) entraîneront également la perte de la couleur.

9
Andy G

JavaScript va faire le travail.

Obtenez tous les liens du document et comparez leurs URL de référence à l'URL du document. S'il existe une correspondance, ajoutez une classe à ce lien.

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

Autres notes

La réponse jQuery ci-dessus de Taraman ne recherche que sur [href] qui renverra les balises link et les balises autres que a qui reposent sur l'attribut href. La recherche sur a[href='*https://urlofcurrentpage.com*'] ne capture que les liens qui répondent aux critères et est donc plus rapide. 

De plus, si vous n'avez pas besoin de vous fier à la bibliothèque jQuery, une solution JavaScript Vanilla est définitivement la solution.

3
Govind Rai

a:link -> Il définit le style des liens non visités.

a:hover -> Il définit le style des liens survolés.

Un lien survole lorsque la souris le survole.

2
rekha_sri

La solution la meilleure et la plus simple: 

Pour chaque page sur laquelle vous souhaitez que votre lien change de couleur jusqu'à ce que vous le changiez, définissez un style interne dans CHAQUE PAGE pour l'attribut VISITED et définissez chaque classe comme une classe individuelle afin de différencier les liens afin d'éviter toute application accidentelle de la fonctionnalité. Nous allons utiliser le blanc comme exemple:

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

Pour tous les autres attributs tels que LINK, ACTIVE et HOVER, vous pouvez les conserver dans votre style.css. Vous voudrez y inclure un VISITÉ pour la couleur à laquelle vous souhaitez que le lien revienne lorsque vous cliquez sur un autre lien.

2
greg

La réponse de N 1.1 est correcte. De plus, j'ai écrit une petite fonction JavaScript pour extraire le lien actuel d'une liste, ce qui vous évite d'avoir à modifier chaque page pour en connaître le lien actuel.

<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>
2
Alex

inclure ceci! sur votre page où vous voulez changer les couleurs, sauvegardez en .php 

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

ajoutez ensuite un nouveau fichier dans un dossier inclus.

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>
2
webestdesigns

@Presto Merci! Votre travail a parfaitement fonctionné pour moi, mais j’ai imaginé une version plus simple pour ne pas tout changer.

Ajoutez une balise <span> autour du texte du lien souhaité, en spécifiant la classe à l’intérieur. (par exemple, balise home)

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

Puis éditez votre CSS en conséquence:

.currentLink {
    color:#baada7;
}
1
Rhianna 
<!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>

Remarque: le style se situe entre la balise head (<head> .... </head>) et la classe = "class1" et l'identifiant = "nav_menu" se situe dans le ie: (- <span class="class1" id="nav_menu"> -).

Ensuite, le dernier attribut de classe (class = "current") apparaît dans le code d'hyperlien du lien de la page à laquelle vous souhaitez que le lien actuel actif corresponde.

Exemple: vous souhaitez que l'onglet de lien reste actif ou mis en surbrillance lorsque la page correspondante est actuellement affichée, accédez à cette page et placez l'attribut class = "current" à l'aide du code html de ce lien. Ce n'est que dans la page qui correspond au lien, de sorte que chaque fois que cette page est affichée, l'onglet reste en surbrillance ou se distingue des autres onglets.

Pour la page d'accueil, allez à la page d'accueil et y placez la classe. exemple: <a href="http://Yourhomepage-url.com/" class="current" target="_parent">

Pour la page À propos de, allez à la page à propos de et placez la classe à l'intérieur. exemple: <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" class="current" target="_parent">

Pour la page de contact, allez à la page de contact et placez-y la classe. exemple: <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" class="current" target="_parent">

etc ......

Notez le tableau ci-dessus: - Supposons qu’il s’agit de la page d’accueil. Ainsi, sur cette page, seule la section de liens url d’origine contient la classe = "current".

Désolé pour toute erreur sans signification, je ne suis pas un prof. mais cela a fonctionné pour moi et affiche bien dans presque tous les navigateurs testés, y compris ipad et les téléphones intelligents. J'espère que cela aidera quelqu'un ici parce que c'est très frustrant de vouloir et de ne pas pouvoir. J'avais essayé de le faire, et jusqu'à présent, c'est bon pour moi.

1
Salaam

Vous n'avez pas besoin de jQuery pour faire ça! Tout ce dont vous avez besoin, c’est d’une minuscule et très légère Javascript Javascript et d’une classe CSS (comme dans toutes les réponses ci-dessus):

  • Commencez par définir une classe CSS dans votre feuille de style appelée current.

  • Deuxièmement, ajoutez le code JavaScript suivant, soit dans votre fichier JavaScript existant, soit dans un fichier de script js séparé (mais ajoutez un lien de script à la tête des pages) ou un événement, ajoutez-le simplement dans une balise de script juste avant la balise de fermeture cela fonctionnera toujours dans tous ces cas.



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

L'attribut 'href' du lien actuel doit être le chemin absolu donné par document.URL (console.log pour s'assurer qu'il est identique)

0
Mohsen Kadoura