сохраняя пункт css в выпадающем меню выделенным php

Question

Мой сайт

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

Пока у меня это есть, но оно не будет работать (я показываю только один пункт меню, у которого нет подменю, поскольку это экономит место)

Вот HTML:

<ul>
    <li><h2><a name="donate" id="donate" href="index2.php?op=Donate">Donate</a></h2></li>
</ul>

Вот CSS, который окрашивает фон:

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

Содержимое каждой страницы определяется значением $ head: $ head = $ _GET ['op'];

Я попытался осуществить изменение, поместив это сразу после меню:

if($head == "Donate") {
echo '<style>
#menu a donate {
color: #000;
background: #fff;
text-decoration: none;
</style>';
}

Когда я оставляю «пожертвовать» из вышеприведенного кода: «#menu a {» цвет фона всех пунктов меню меняется на белый, но мне нужно специально изменить кнопку «пожертвовать». Я попытался сделать это, добавив id = "donate" / name = "donate" к пункту меню (как показано выше), а затем вызвал его в css с помощью #menu a donate {'. но это явно неправильно, так как не работает! Что мне делать?

Answer 1

Я думаю, вам нужно использовать

if($head == "Donate") {
    echo '<style>
    #menu a#donate {
        color: #000;
        background: #fff;
        text-decoration: none;
    }
    </style>';
}

вместо этого как селектор, потому что donate является идентификатором для тега, поэтому он идет сразу после тега (без пробелов) с "#" впереди.

Вам также не хватало закрывающей скобки "}" для объявления css.

Answer 2

ОК, быстрый и грязный ответ: ваш селектор CSS не будет работать, потому что сейчас он ищет тег «donate» внутри тега «a» внутри тега с идентификатором «menu». Я предполагаю, что все ваши ссылки имеют определенный Id, поэтому простой способ сделать это - использовать этот селектор

 #donate
 {
     color: #000;
     background: #fff;
     text-decoration: none;
 }

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

Кстати, вы, кажется, не закрываете тег стиля. Это ошибка?

Теперь, для более длинного ответа, это не совсем лучший способ сделать это. Я предлагаю вам создать класс CSS с именем наподобие currentpage и использовать его в своем меню

.

<li><h2><a <?php if($head == "Donate") echo 'class="currentpage"'; ?> id="donate" href="index2.php?op=Donate">Donate</a></h2></li>

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

Кстати, вы должны удалить атрибут name из тега, это устаревшая функция. id отлично справляется со своей работой.

Answer 3

В таких ситуациях вы обычно будете использовать класс CSS для выделенного в данный момент элемента:

<a href="..." class="highlight" ...>Current item </a>
<a href="..." ...>not current item</a>

Таким образом, вы не измените идентификаторни имя, ни что-либо еще - но просто:

• Когда элемент выделен, добавьте класс css
• А когда элемент не выделен, удалите класс css.

Этот класс может быть добавлен из Javascript, если необходимо - но он также может быть сгенерирован из PHP, используя что-то вроде этого:

<a href="..." <?php if ($current=='item1') {echo 'class="highlight"';} ?> ...>Current item </a>
<a href="..." <?php if ($current=='item2') {echo 'class="highlight"';} ?>...>not current item</a>

Answer 4

Вы должны установить класс для текущего элемента страницы, используя php, и использовать css, чтобы установить правила для этого класса.

Answer 5

usgin css вы можете попробовать следующим образом:

#menu a:active {
color: #000;
background: red:
text-decoration: none;
}

с помощью jquery это можно сделать следующим образом:

Сначала создайте CSS, как показано ниже:

.active {
color: #000;
background: red:
text-decoration: none;
}

затем напишите код jquery:

$('#menu a').click(function(){
  $('#menu ul li h2').find('a.active').removeClass('active');
  $(this).addClass('active');
});