Просьба подсказать что не так...
Задача, заставить кнопки меню менять bg после нажатия и сохранять его до тех пор пока не нажать ещё раз (или обновить страницу).
кусок кода html вместе со скриптом (скрипт не мой):
<script type="text/javascript" src="jquery-1.10.2.js">
// вешаем на каждую ссылку обработчик
$(".menuitem").click(function(){
// удаляем у старого элемента, класс activeClass
$(".activeClass").removeClass("activeClass");
// добавляем к ссылки по которой щёлкнули класс activeClass
$(this).addClass("activeClass");
});
</script>
<body id="menu">
<ul>
<li><a href="general.html" class="menuitem" target="content" onClick="openMenu('sub_menu_1');return(true)">Главная</a>
<ul id="sub_menu_1">
<li><a href="about_us.html" target="content">О компании</a></li>
</ul>
</li>
и т.д. , там ещё скрипт на открытие подменю есть (всё работает кроме изменения стиля зажатых ссылок)
кусок кода css:
#menu ul li a {
color: #fff;
text-decoration: none;
font-size: 115%;
font-family: Georgia;
} //обычное состояние
#menu ul li a:hover {
color: #fff;
text-decoration: none;
background:#99ccff;
} //при наведении
#menu ul li a.activeClass {color: #fff;
background:#00f000;} // по логике при нажатии но не работает
Очень прошу помочь в jq новичок но на css такую проблему не решить....
Примечание:
Возможно надо было больше кода css скинуть (вот это у меня до того что выложил ранее, пробовал вставить в <li>, но тоже не работает):
#menu li ul {
display: none;
}
#menu li:hover ul {
display: block;
}
#menu {
margin-top:0px;
margin-left:0px;
background:#3a75c4;
width: 180px;
}
#menu a {
background:#3a75c4;
display: block;
width: 190px;
height: 25px;
padding-left: 14px;
}
Примечание:
в общем по скинутой вами ссылке попытался адаптировать хотя бы в облегченную версию:
html>
<head>
<title>menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-1.10.2.js">
$(document).ready(function(){
$('#select').addClass('first');
$('#select').toggle(function(){
$(this).addClass('second')
},
function(){
$(this).removeClass('second').addClass('first')
})
})
</script>
</head>
<body>
<ul>
<li><a href="general.html" id="select" target="content">Главная</a>
</ul>
</body>
</html>
и CSS:
a .first{
display:block;
width:180px;
height:30px;
text-decoration:none;
background:#f00;
color:#0F0;
}
.second{
display:block;
text-decoration:none;
background:#00b;
color:#0F0;
width:180px;
height:30px;
}
Абсолютно ничего не происходит (даже начальный стиль от first не присваивается), такое чувство что скрипт не работает (хотя вроде библиотеки подключил правильно скачал с офф. сайта положил рядом)
Добрые и умные люди помогите)
RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.
Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.
Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.