Можно ли установить стиль ссылки, который будет отображаться только при просмотре связанной веб-страницы?
У меня такая проблема (это меню html / css):
Интернет-магазин | Другой интернет-магазин | Другой интернет-магазин
Клиент хочет, чтобы это работало так:
Пользователь заходит на сайт, нажимает на Eshop. Eshop изменится на красный цвет с красным контуром коробки. Пользователь решает посетить другой интернет-магазин, поэтому Eshop вернется к нормальному цвету без красной рамки, а другой интернет-магазин снова сделает трюк с красным контуром.
Я знаю, что есть A: посещено, но я не хочу, чтобы все посещенные ссылки меню были красными с красной рамкой.
Спасибо за любую помощь :)
Нет, они открываются в том же окне, да, после закрытия веб-сайта его следует отключить. Хочу выделить "ссылку на активный сайт" ..
Ответы 8
Вы можете сделать это с помощью классов CSS. Например, класс выбранный может идентифицировать текущий магазин, изменяя цвет и контур. Затем вы можете изменить выбор, добавив / удалив класс из пункта меню.
Взгляните на здесь, он проходит через руководство по созданию меню CSS.
Не могли бы вы уточнить, пожалуйста?
Насколько я знаю, вы можете сделать это, только создав различный код для каждой страницы (установив другой класс для текущей страницы) или используя JavaScript для изменения меню после загрузки страницы.
То же, что написал Джо Скора, но более конкретно:
.red {
outline-color:red;
outline-width:10px;
}
Теперь вы можете использовать Javascript (в этом примере с использованием jQuery) в обработчике события щелчка:
$('.red').removeClass('red'); // removes class red from all items with class red
$(this).addClass('red'); // adds class red to the clicked item
Другой способ сделать это - использовать псевдоселектор target.
.
Для информации об этом: www.thinkvitamin.com
Это зависит от ссылок, НЕ нацеленных на отдельные страницы, что, хотя и возможно, маловероятно.
По сути, это невозможно сделать только с помощью CSS, потребуется выполнение некоторых сценариев (на стороне сервера или клиента, предпочтительно на сервере). Как предлагали другие, добавьте к активной ссылке «выбранный» класс (или что-то подобное) и определите для него стили в CSS.
Например, ссылки:
<a href = "#">Eshop</a> | <a href = "#" class = "selected">Another eshop</a> | <a href = "#">Another eshop</a>
Стили:
.selected {
font-weight:bold;
color:#efefef;
}
Ссылки будут генерироваться динамически, например, с использованием PHP:
<?php
foreach(array('eshop' => '#','another eshop' => '#','yet another eshop' => '#') as $title => $url) {
echo '<a href = "' . $url . '"'
. ($url == $_SERVER['REQUEST_URI'] ? ' class = "selected"' : null)
. '>' . $title . '</a>';
}
вы можете использовать такой селектор атрибутов ...
a[href^ = "http:\www.EShop"]:visted { color: red; }
Тем самым вы говорите, что любая ссылка, href которой начинается с http: \ Eshop.com и была посещена, применяет этот стиль.
Вы можете сделать это с помощью простого CSS и HTML. Обычно мы используем метод, чтобы иметь соответствующий идентификатор и селектор класса для каждого элемента навигации.
Преимущество этого заключается в том, что вам не нужно изменять свой код меню на страницу, вы изменяете сама страница, что вы уже будете делать, если все не будет полностью динамическим.
Это работает так:
<!-- ... head, etc ... -->
<body>
<ul class = "nav">
<li><a href = "home.html" class = "nav-home">Home</a></li>
<li><a href = "art.html" class = "nav-art">Art</a></li>
<li><a href = "contact.html" class = "nav-contact">Contact</a></li>
</ul>
<!-- ... more page ... -->
</body>
Затем вы настраиваете такой CSS:
#NAV-HOME .nav-home,
#NAV-ART .nav-art,
#NAV-CONTACT .nav-contact { color:red; }
Чтобы изменить «текущий» пункт меню, вы можете просто присвоить соответствующий ID элементу выше в структуре документа. Обычно я добавляю его в тег <body>.
Все, что вам нужно сделать, чтобы выделить страницу «Искусство», это:
<!-- The "Art" item will stand out. -->
<body id = "NAV-ART">
<ul class = "nav">
<li><a href = "home.html" class = "nav-home">Home</a></li>
<li><a href = "art.html" class = "nav-art">Art</a></li>
<li><a href = "contact.html" class = "nav-contact">Contact</a></li>
</ul>
<!-- ... more page ... -->
</body>
Это зависит от того, как построены ваши страницы, но классический CSS делал это с идентификатором в теле, а также с каждой навигационной ссылкой, поэтому у вас может быть что-то вроде:
eshop.html
<body id = "eshop">
<ul>
<li><a href = "" id = "link-eshop">Eshop</a></li>
<li><a href = "" id = "link-aeshop">Another eshop</a></li>
<li><a href = "" id = "link-eshop-three">Another eshop</a></li>
</ul>
</body>
и соответствующий CSS:
#eshop #link-eshop, #aeshop, #link-aeshop, #eshop-three #link-eshop-three
{
color: red;
outline: 1px solid red;
}
навигация последовательная; от страницы к странице меняется только идентификатор в теле.
Если вы переходите на новую страницу в окне браузера такой же, Зак Малгрю и Бобби Джек оба имеют отличные ответы.
Если вы открываете ссылку eshop в новом окне, вы мало что можете сделать с помощью css, и GS имеет разумный ответ, за исключением выбора имени класса (красный).
Что он?
Не могли бы вы прояснить вариант использования, открываются ли новые веб-сайты в новом окне / iframe? Вы просто хотите выделить последнюю выбранную ссылку? Нужно ли снимать флажок, когда веб-сайт Eshop закрыт?