Отредактировал пост, чтобы код был читабельный.
Задача: нажимаем на ссылку (ссылка по задумке в виде иконки), ссылка становится активной (над иконкой появляется <em>Название</em>), по клику открывается div с нужным контентом(это работает), при следующем клике удаляем прошлую активность-делаем новую.
Сейчас использую два скрипта в шапке
1) при наведении отображает em - работает,
2) пытаюсь присвоить класс active - не работает:
<head>
<script type='text/javascript' src='jquery-1.6.4.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$(".mapmenu a").hover(function() {
$(this).next("em").stop(true,true)
.animate({opacity: "show", top: "85"}, "slow");
}, function() {
$(this).next("em").stop(true,true)
.animate({opacity: "hide", top: "75"}, "fast");
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".mapmenu li").click(function(e) {
e.preventDefault();
$("li").removeClass("active");
$(this).addClass("active");
});
});
</script>
</head>
В боди список ссылок, которые делают видимым каждая свой div с id="text
i" - это работает.
<body>
<ul class="mapmenu">
<li><a style="color:#0066CC;" href="javascript:void()" id="l1" onclick="ChangeText(this)"></a><em>Москва</em></li>
<li><a href="javascript:void()" id="l2" onclick="ChangeText(this)"></a><em>Санкт Петербург</em></li>
<li><a href="javascript:void()" id="l3" onclick="ChangeText(this)"></a><em>Печора</em></li>
</ul>
<div class="maptext" id="text1"><p>ОАО «Научно-исследовательский институт», г. Москва</p></div>
<div class="maptext" id="text2" style="display:none;"><p>ЗАО «Норд», г. Санкт-Петербург</p></div>
<div class="maptext" id="text3" style="display:none;"><p>ООО «Э», г. Печора</p></div>
<div id="block1" style="display:none;">A</div>
<div id="block2" style="display:none;">В</div>
<div id="block3" style="display:none;">C</div>
В подвале скрипт который реализует появление и скрытие div c id="text
i", пытаюсь туда же вкорячить аналогично спрятать/показать и для div c id="block
i" - не работает!
<div id="footer">
<script type="text/javascript" language="JavaScript">
function ChangeText(el){
n = 20;
id = el.id.substr(1);
for (var i=1; i<=n; ++i)
{
document.getElementById("l"+i).style.color = "#6e7073";
document.getElementById("text"+i).style.display = "none";
document.getElementById("block"+i).style.display = "none"; - это не только не работает, но и поганит весь скрипт :)
}
document.getElementById("l"+id).style.color = "#0066CC";
document.getElementById("text"+id).style.display = "";
document.getElementById("block"+id).style.display = ""; - это не только не работает, но и поганит весь скрипт :)
}
</script>
</div>
</body>
</html>
Очень нужна помощь!