Можно ли установить стиль ссылки, который отображается только при просмотре связанной веб-страницы? - PullRequest
Новая
       18

Можно ли установить стиль ссылки, который отображается только при просмотре связанной веб-страницы?

1 голос
/ 12 октября 2008

У меня такая проблема (это меню html / css):

Eshop | Еще один интернет-магазин | Еще один магазин

Клиент хочет, чтобы это работало так:

Пользователь заходит на сайт, нажимает на Eshop. Eshop меняет цвет на красный с контуром красной рамки. Пользователь решает посетить другой eshop, поэтому Eshop вернется к обычному цвету без красного контура, а другой eshop снова выполнит трюк с красным контуром.

Я знаю, что есть A: посещено, но я не хочу, чтобы все посещенные ссылки меню были красными с красной рамкой.

Спасибо за любую помощь:)

Ответы [ 8 ]

2 голосов
/ 14 октября 2008

Вы можете сделать это с простым 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; }

Чтобы изменить «текущий» пункт меню, вы можете просто назначить соответствующий идентификатор элементу выше в структуре документа. Обычно я добавляю его в тег .

Чтобы выделить страницу «Искусство», все, что вам нужно сделать, это: 

<!-- 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>
2 голосов
/ 12 октября 2008

То же, что написал Джо Скора, но более конкретно: 

.red {
    outline-color:red;
    outline-width:10px;
}

Теперь вы можете использовать Javascript (в этом примере, используя jQuery ) в обработчике события click: 

$('.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

1 голос
/ 14 октября 2008

Если вы переходите на новую страницу в том же окне браузера, Зак Малгрю и Бобби Джек оба имеют отличные ответы .

Если вы открываете ссылку в интернет-магазине в новом окне, вы мало что можете сделать с помощью css, и gs может дать разумный ответ, за исключением выбора имени класса ( красный ).

Что это?

1 голос
/ 12 октября 2008

По сути, это невозможно сделать только с помощью 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>'; 
 }
1 голос
/ 12 октября 2008

Вы можете сделать это с помощью классов CSS. Например, класс selected может идентифицировать текущий магазин, изменяя цвет и контур. Затем вы можете изменить выбор, добавив / удалив класс из пункта меню.

Взгляните здесь , он просматривает руководство по созданию CSS-меню.

0 голосов
/ 14 октября 2008

Это зависит от того, как создаются ваши страницы, но классический 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;
}

навигация последовательная; со страницы на страницу меняется только идентификатор тела.

0 голосов
/ 14 октября 2008

вы можете использовать и атрибут селектора, как это ... 

a[href^="http:\\www.EShop"]:visted { color: red; }

Делая это, вы говорите, что любая ссылка, которая имеет href, начинающийся с http: \ Eshop.com и был просмотрен, применяет этот стиль.

0 голосов
/ 12 октября 2008

Насколько я знаю, вы можете сделать это, только генерируя различный код для каждой страницы (устанавливая другой класс для текущей страницы) или используя JavaScript для изменения меню после загрузки страницы.

...