Изменить цвет ссылки на текущую страницу с помощью CSS

Как один стиль связывает текущую страницу по-другому с другими? Я хотел бы поменять цвета текста и фона.

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

Ответы

Ответ 1

a:active: когда вы нажимаете на ссылку и удерживаете ее (активно!).
a:visited: когда ссылка уже была посещена.

Если вы хотите, чтобы ссылка, соответствующая текущей странице, была выделена, вы можете определить определенный стиль для ссылки -

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

Добавьте этот новый класс только к соответствующей li (link), либо на стороне сервера, либо на стороне клиента (используя JavaScript).

Ответ 2

С помощью 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]) ...

Таким образом, вам не нужно редактировать каждую страницу.

Ответ 3

Этого можно добиться без необходимости индивидуально изменять каждую страницу (добавив "текущий" класс к определенной ссылке), но все же без JS или серверной стороны script. Для этого используется псевдо-селектор : 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>

Существует несколько ограничений:

Если страница не была переадресована на использование одной из этих ссылок, она не будет цвета;
Иды должны появляться в верхней части страницы, иначе страница будет немного сбиваться при посещении.

Пока какие-либо ссылки на эти страницы содержат идентификатор, а панель навигации наверху, это не должно быть проблемой.

Другие ссылки на странице (закладки) также могут привести к потере цвета.

Ответ 4

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, безусловно, подходит.

Ответ 5

a:link → Он определяет стиль для невидимых ссылок.

a:hover → Определяет стиль для зависающих ссылок.

Ссылка перемещается, когда мышь перемещается по ней.

Ответ 6

включить это! на вашей странице, где вы хотите изменить цвета, сохраняемые как .php

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

затем добавьте новый файл в папку include.

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

Лучшее и простое решение:

Для каждой страницы, на которую вы хотите, чтобы ваша соответствующая ссылка меняла цвет до тех пор, пока не была включена, введите внутренний стиль в EACH PAGE для атрибута VISITED и сделайте каждый отдельный класс, чтобы различать ссылки, чтобы вы не применяли эту функцию к все случайно. В качестве примера мы будем использовать белый цвет:

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

Для всех других атрибутов, таких как LINK, ACTIVE и HOVER, вы можете сохранить их в своем стиле style.css. Вы также захотите включить в нее ПОСМОТРЕТЬ для цвета, по которому вы хотите, чтобы ссылка вернулась к вам, когда вы нажмете другую ссылку.

Ответ 8

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>

Ответ 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_menu" идет в ie: (- <span class="class1" id="nav_menu"> -).

Затем последний атрибут класса (class= "current" ) находится в гиперссылке ссылки на странице, на которую вы хотите, чтобы текущая текущая ссылка соответствовала.

Пример: вы хотите, чтобы вкладка ссылок оставалась активной или подсвеченной, когда соответствующая страница соответствует текущей странице, перейдите на эту страницу и поместите ссылку class= "current по этой ссылке html-код. Только на странице, соответствующей ссылке, чтобы при просмотре этой страницы вкладка оставалась подсвеченной или отличалась от остальных вкладок.

Для домашней страницы перейдите на домашнюю страницу и поместите в нее класс. Пример: <a href="http://Yourhomepage-url.com/" class="current" target="_parent">

На странице About перейдите на страницу about и поместите в нее класс. Пример: <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">

и т.д.

Обратите внимание на приведенную выше таблицу: - Предположим, что это была домашняя страница, поэтому на этой странице только раздел ссылок на главный URL имеет class= "current"

Извините за любую бессмысленную ошибку, я не проф. но это сработало для меня и прекрасно отобразилось почти во всех проверенных браузерах, включая ipad и смартфоны. Надеюсь, это поможет кому-то здесь, потому что очень разочаровывает желание и неспособность. Я попытался, поэтому мне пришлось это сделать, и пока это хорошо для меня.

Ответ 10

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

Ответ 11

Вам не нужен JQuery только для этого! Все, что вам нужно, это маленький и очень легкий ванильный Javascript и класс CSS (как во всех ответах выше):

Сначала определите класс CSS в вашей таблице стилей, который называется current.
Во-вторых, добавьте следующий чистый JavaScript либо в существующий файл JavaScript, либо в отдельный файл сценария js (но добавьте ссылку на него в начале страницы), либо в событие просто добавьте его в тег сценария непосредственно перед закрывающим тегом body, это все еще будет работать во всех этих случаях.



    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, чтобы убедиться, что он такой же)

Ответ 12

Используйте одно имя класса что-то вроде 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;
}

Ответ 13

Так, например, если вы пытаетесь изменить текст привязки на текущей странице, на которой вы используете только 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;
}