Делаю карту, оформление ссылки внутри страницы
Всем привет, использую скрипт, с которым думаю многие сталкивались:
<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> Делаю карту, мини-конками на ней ссылки, которые открывают свой спрятанный контент под картой, не переходя на другую страницу. При возекании мышкой показывает и скрывает <em>Название города</em> как и задумано в скрипте выше. Хочется дополнить, чтобы можно было кликать по этим ссылкам и видеть <em>Название города</em> и чтобы это название оставалось до следующего клика. Дополнял код этим: $(".mapmenu a").click(function() { $(this).next("em").stop(true,true) .animate({opacity: "hide", top: "75"}, "fast"); $(this).next("em").stop(true,true) .animate({opacity: "show", top: "85"}, "slow"); }); но нужного результат нет. Догадываюсь, что необходима проверка условий, но реализовать не получается. Буду очень благодарен, если наглядно поможите разобраться в вопросе! http://malesya.ru/rusenefz/?page_id=506 здесь видно, как провожу эксперементы. |
http://www.ackye.ru/about/branches/ то, к чему стремлюсь.
Если покажите и расскажите другой способ реализовать задумку, буду отдельно признателен. |
Отредактировал пост, чтобы код был читабельный.
Задача: нажимаем на ссылку (ссылка по задумке в виде иконки), ссылка становится активной (над иконкой появляется <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="texti" - это работает. <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="texti", пытаюсь туда же вкорячить аналогично спрятать/показать и для div c id="blocki" - не работает! <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> Очень нужна помощь! |
Цитата:
|
Отредактировал пост выше, надеюсь стало понятнее, если есть вопросы готов все разъяснить!
|
Slipknot, вот такие примеры делать нужно...
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <!-- <link rel="stylesheet" type="text/css" href="tmp.css" /> --> <style type="text/css"> * { margin: 0; padding: 0; } #box { position: relative; width: 200px; height: 140px; border: 1px solid; } .item { position: absolute; } #i1 { top: 10px; left: 5px; } #i2 { top: 50px; left: 70px; } #i3 { top: 100px; left: 100px; } .item > a { display: block; width: 21px; height: 20px; background: url('http://javascript.ru/forum/images/smilies/smile.gif'); } .item > p { display: none; } .item:hover > p, .item > p.on { display: block; } </style> <script type="text/javascript"> $(document).ready(function(){ $('.item > a').click(function(){ $(this).next('p').toggleClass('on'); }); }); </script> </head> <body> <div id='box'> <div class='item' id='i1'> <a href='#'></a> <p>Москва</p> </div> <div class='item' id='i2'> <a href='#'></a> <p>Волгоград</p> </div> <div class='item' id='i3'> <a href='#'></a> <p>Астрахань</p> </div> </div> </body> </html> Т.е. больше абстракции в примере и 100% конкретики... |
Спасибо за пояснение - все учту, сейчас скрипт при след. клике показывает след. город, но не удаляет прошлый. Прошлый удаляется при втором клике по нему.
<script type="text/javascript"> $(document).ready(function(){ $('.item > a').click(function(){ $(this).next('p').toggleClass('on'); }); }); </script> |
Цитата:
|
Slipknot, чуть фантазии добавь... :)
<script type="text/javascript"> $(document).ready(function(){ $('.item > a').click(function(){ $('.item > p').removeClass('on'); $(this).next('p').toggleClass('on'); }); }); </script> |
ступил, уже делал аналогично с актив :)
<script type="text/javascript"> $(document).ready(function(){ $('.item > a').click(function(){ $('p').removeClass('on'); $(this).next('p').toggleClass('on'); }); }); </script> спасибо, буду пытаться вставить в свой бордачный код, надеюсь будет работать |
Часовой пояс GMT +3, время: 20:34. |