Форум Сайтостроение Веб-строительство

Вопрос по javascript

RaftKorn
На сайте с 20.03.2007
Offline
166
RaftKorn
427

Есть скрипт который при наведении на пункт меню, показывает в определенном месте страницы его под меню, а если навести на другой пункт меню, то его подменю выведется в том же месте где и предыдущее. Вот сам скрипт:

<script type="text/javascript">
function showsubmenu(id){
submenu=document.getElementById('s'+id);
for(i=1;i<=10;i++){
if(i==id){
submenu.style.display="block";
submenua.style.display="none";
} else{
document.getElementById('s'+i).style.display="none";
}
}
}
</script>

Пример меню:


Основное меню:
<li><a href="#" onmouseover="javascript:showsubmenu(1)">Рубрика 1</a></li>
<li><a href="#" onmouseover="javascript:showsubmenu(2)">Рубрика 2</a></li>
<li><a href="#" onmouseover="javascript:showsubmenu(3)">Рубрика 3</a></li>

Появляющееся меню:
<ul id="s1">Меню 1</ul>
<ul id="s2">Меню 1</ul>
<ul id="s3">Меню 2</ul>

Собственно вопрос - как активному пункту основного меню задать класс, и чтоб этот класс убирался когда мышка наводится на другой пункт меню.

Премиум верстка и дизайн под ключ ( https://searchengines.guru/ru/forum/1045270 )
T
На сайте с 20.03.2007
Offline
67
Toy
#1

http://www.w3schools.com/jsref/event_onmouseout.asp

RaftKorn
На сайте с 20.03.2007
Offline
166
RaftKorn
#2

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

T
На сайте с 20.03.2007
Offline
67
Toy
#3

Можно проверять, есть ли у выбранного элемента нужный класс, если нет, пробежать по DOM структуре меню убрать искомый класс со всех элементов на которых он стоит и затем назначить его на выбанный пункт меню.

4arger
На сайте с 17.12.2008
Offline
95
4arger
#4

js:


<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("li a").mouseover(function() {
$("ul").removeClass("cls");
$("ul#" + $(this).attr("href")).addClass("cls");
});
});
</script>

html:


<style type="text/css">.cls { background: #000; color: #fff; }</style>
<li><a href="s1">Рубрика 1</a></li>
<li><a href="s2">Рубрика 2</a></li>
<li><a href="s3">Рубрика 3</a></li>

<ul id="s1">Меню 1</ul>
<ul id="s2">Меню 1</ul>
<ul id="s3">Меню 2</ul>

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий