Jump to content
  • 0

a: active - не работает


volonter
 Share

Question

Доброго всем!

Подскажите, вот такой код

#menu li a:hover, #menu li a:active { color: #AF1515; background: url(../images/menu.gif) no-repeat center bottom; }

нужно что бы при наведении на ссылку и при нажатии на нее был один и тот же рисунок, тоесть пользователь нажал на "главная" - рисунок на ссылке "главная", нажал на другую - рисунок на ней

a:hover работает, а вот a:active - не хочет

Link to comment
Share on other sites

Recommended Posts

  • 0
Вот пример где это работает

http://www.rbwest.ru/

В приведенном вами примере за указание пункта меню отвечает

class="active"

,

который при формировании страницы указывается нужному пункту li списка ul.menu

Link to comment
Share on other sites

  • 0

А я вот не могу логику этого продумать.

Допустим мы заставили скрипт узнать на какой мы сейчас странице, к примеру на 4-й.

Но как его заставить применить этот класс именно к 4-му пункту меню? Вообще не пойму, как такое на пых сделать.

Ничего кроме как начать выбирать пункты меню по древу DOM и им изменять классы в голову не лезет.

Ну или условия

<li <?php if (var == 4) echo "class='active'" ?>>list item</li>

Так нет?

Link to comment
Share on other sites

  • 0
А я вот не могу логику этого продумать.

Допустим мы заставили скрипт узнать на какой мы сейчас странице, к примеру на 4-й.

Но как его заставить применить этот класс именно к 4-му пункту меню? Вообще не пойму, как такое на пых сделать.

Ничего кроме как начать выбирать пункты меню по древу DOM и им изменять классы в голову не лезет.

Ну или условия

<li <?php if (var == 4) echo "class='active'" ?>>list item</li>

Так нет?

самое простое - классы меню одноименно с урлом. Все, если свопадает - добавить active.

Link to comment
Share on other sites

  • 0
А я вот не могу логику этого продумать.

Допустим мы заставили скрипт узнать на какой мы сейчас странице, к примеру на 4-й.

Но как его заставить применить этот класс именно к 4-му пункту меню? Вообще не пойму, как такое на пых сделать.

Ничего кроме как начать выбирать пункты меню по древу DOM и им изменять классы в голову не лезет.

Ну или условия

<li <?php if (var == 4) echo "class='active'" ?>>list item</li>

Так нет?

Естественно условия! А уж что там будет флажком - не принципиально. Есть и более мудреные способы, но в данной ситуации помоему не стоит мучиться.

Link to comment
Share on other sites

  • 0
Вот пример где это работает

http://www.rbwest.ru/

в главном меню тот пункт, на котором находиться пользователь, подсвечен белым фоном, при наведении курсора пунк меню подсвечивается серым фоном, вот мне нужно так же

я смотрел как это реализовано в том шаблоне

a (линия 54)

{

color: #006699;

text-decoration: underline;

}

a:hover, a:active, a:focus (линия 59)

{

color: #333333;

text-decoration: underline;

}

a:hover, a:active, a:focus (линия 59)

{

color: #333333;

text-decoration: underline;

ul.menu li a:hover, ul.menu li a:active, ul.menu li a:focus (линия 357)

{

background-color: #f6f6f6;

}

делаю так же, изменений ноль и пропадает еще и картинка при наведении

если внимательно присмотришся то также увидишь

#ja-container2 ul.menu li.active a

Link to comment
Share on other sites

  • 0
самое простое - классы меню одноименно с урлом. Все, если свопадает - добавить active.

Я что-то не понял это как так?

Searcher, понял, спасибо. Флажком вернее всего будет какой-нибудь идентификатор который отвечает за формирование страницы. Ну в общем флажок сделать не будет проблемой.

Link to comment
Share on other sites

  • 0
Searcher, понял, спасибо. Флажком вернее всего будет какой-нибудь идентификатор который отвечает за формирование страницы. Ну в общем флажок сделать не будет проблемой.

Пожалуйста! :) Ну так вот какой-то параметр в урл тоже может быть флажком :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy