Делаю карту, оформление ссылки внутри страницы
Всем привет, использую скрипт, с которым думаю многие сталкивались:
<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> спасибо, буду пытаться вставить в свой бордачный код, надеюсь будет работать |
Лови плюсик :)
|
Slipknot, даже лучше вот так...
<script type="text/javascript">
$(document).ready(function(){
$('.item > a').click(function(){
var o=$(this).next('p').get(0)
$('.item > p').filter(function () {
return this!=o;
}).removeClass('on');
$(this).next('p').toggleClass('on');
});
});
</script>
|
Цитата:
|
Твой пример отлично работает, у меня проблемы с интегрированием этого кода на свою страницу: вставляю в исходном виде, id и class уникальны. На странице все отображается, при наведении появляется название, но вот при клике ничего не происходит.
Может причина в том что сайт на wordpress, но другие скрипты ведь работают. http://malesya.ru/rusenefz/?page_id=1565# |
Цитата:
Цитата:
|
Подскажи пожалуйста, принцип работы моей задумки заключается в присвоении класса ссылке, для которой в css будет стоять display:block;, можно ли реализовать эту идею в скрипте, который работает :
<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("l"+id).style.color = "#0066CC";
document.getElementById("text"+id).style.display = "";
}
</script>
Я писал выше, что пытался дополнить этот скрипт таким образом:
<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>
в результате срипт и вовсе перестает функционировать. Бабосы думаю будут, если решу этот вопрос :) |
Цитата:
|
| Часовой пояс GMT +3, время: 16:42. |