У меня есть меню следующим образомКак сделать меню Активный
<ul>
<li><a href="index.php">Home</a></li>
</ul>
как сделать его активным, когда я посещаю эту страницу. Я попытался следующие, но не повезло
#navigation a:active {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
Я новичок webie спасибо за любые предложения
Добавить идентификатор в код, как показано ниже
Update
<div id="menu">
<ul>
<li id="myHome"><a href="index.php">Home</a></li>
</ul>
</div>
Написать сценарий как ниже
<script>
window.onload = menuSelect('myHome');
</script>
В вашей index.php странице, вам нужно отредактировать HTML, таким образом:
<ul>
<li><a href="index.php" class="active">Home</a></li>
</ul>
В других страниц, скажем about.php, у вас может быть что-то вроде этого:
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php" class="active">About</a></li>
</ul>
И изменить CSS к .active и не :active, а второй представляет собой состояние элемента:
#navigation a.active {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
Ему еще нужен код, чтобы определить, какой элемент меню является текущей активной страницей. – Gerton
@ Gerton Man, только что вписал его! –
Это сильно зависит от того, использует ли он фреймворк и если да, то какой. Если вы используете шаблоны, просто добавляя класс к случайному пункту меню, он не собирается его обрезать. – Gerton
Это не работает так. Вы должны сделать собственную логику, чтобы поставить класс на элемент (или жёстко, если это статический HTML страницы), как это:
<li class="current"><a href="index.php">Home</a></li>
, а затем назначить CSS классом:
#navigation li.active a {
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
Псевдо-селектор :active предназначен для того, когда элемент хорошо, активен, например, когда ссылка нажимается.
Что вам нужно сделать, это дать элементу класса <a> атрибут класса и соответствующим образом его подобрать.
Каждая страница имеет класс на тело тега, который определяет его:
BODY OF ГЛАВНАЯ:
<body class="home">
<ul>
<li><a href="index.php" class="home">Home</a></li> //Each navigation item also includes a class identifying that particular link.
<li><a href="aboutUs.php" class="aboutUs">About Us</a></li>
</ul>
</body>
ТЕЛО О НАС СТРАНИЦЕ:
<body class="aboutUs">
<ul>
<li><a href="index.php" class="home">Home</a></li>
<li><a href="aboutUs.php" class="aboutUs">About Us</a></li>
</ul>
</body>
Тогда вы нацелены на тех классы в CSS, определяя другое состояние для текущей страницы:
CSS СТИЛЬ:
body.home a.home, body.aboutUs a.aboutUs{
//HERE GOES YOUR CSS
color: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#DFE7FA), to(#FFF));
border-bottom-width:0px;
}
Не будет ли это, когда пользователь обновит страницу? –
Я не думаю, что это будет даже вопрос JavaScript или jQuery! Пожалуйста, прочитайте его полностью! –
Да, правеен, ты был прав. Я надеюсь, что ответ выше делает правильную работу –
Вы хотите, чтобы он менял цвет, когда вы его посещали или когда вы нажимаете на него? – Gwny
Откуда вы знаете, на какой странице вы находитесь? Вы используете php (или javascript/jQuery ...), чтобы обнаружить это? – jeroen
@jeroen Не может ли страница иметь собственное содержимое? Вам действительно нужен JavaScript для определения содержимого страницы? –