Есть код: HTML: <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.spoiler_links').click(function(){ $(this).parent().children('.spoiler_body').slideToggle(); return false; }); }); </script> <style type="text/css"> .spoiler_body {display:none;background-color:#f1f1f1;} .spoiler_links {cursor:pointer;} </style> </head> <body> <br /><br /> <center> <div><a name="1" class="spoiler_links"><strong>1</strong></a> <div class="spoiler_body"> <p><a href="#2" name="1-1">2</a><br /><br /> <a href="#2-1" name="1-2">3</a></p> </div></div> <br /><br /> <div><a name="2" class="spoiler_links"><strong>4</strong></a> <div class="spoiler_body"> <p><a href="#1" name="2-1">5</a><br /><br /> <a href="#1-1" name="2-2">6</a><br /><br /> <a href="#1-2" name="2-3">7</a></p> </div></div> </center> </body> </html> работает как надо. Показывает и скрывает блоки по клику, но столкнулся с проблемой html якорей. Блоки открыты. Все якоря работаю отлично, но если какой-то блок скрыт, то перехода с открытого блока к другому скрытому не осуществляется... Google не помог... В чем может быть проблема?
return false; уберите Код (Javascript): $('.spoiler_body a').on('click', function() { $('a[name=' + $(this).attr('href').replace('#', '') + ']') .closest('.spoiler_body') .show(); }); --- Добавлено --- Тег center
Возникли косяки... сначала с точками если якорь такой: HTML: <a href="#2.1" name="1.2">3</a> помогло замена на: Код (Javascript): $('a[name="' + $(this).attr('href').replace('#','') + '"]') а если вложения двойные или мнгоуровневые то не работает: HTML: <div><a name="1" class="spoiler_links"><strong>1</strong></a> <div class="spoiler_body"> <p><a href="#2" name="1-1">2</a><br /><br /> <a href="#sign-2.3.2-3" name="sign-2.3.2-3">3</a></p> </div></div> <br /><br /> <div><a name="0" class="spoiler_links"><strong>0</strong></a> <div class="spoiler_body"> <div><a name="2" class="spoiler_links"><strong>4</strong></a> <div class="spoiler_body"> <p><a href="#1" name="sign-2.3.2-3">5</a><br /><br /> <a href="#1-1" name="2-2">6</a><br /><br /> <a href="#sign-2.3.2-3" name="2-3">7</a></p> </div></div></div></div>
@WHITE_DRAGON у вас два элемента с одинаковыми значениями "name" и одна из этих ссылка ведёт сама на себя: HTML: <a href="#1" name="sign-2.3.2-3">5</a> <a href="#sign-2.3.2-3" name="sign-2.3.2-3">3</a>
Сори. Это я печатался... просто основной текст весит 1 мб и там кода на несколько тысяч строк... а на форум для примера скидываю образец, на котором ставлю опыты))) я исправил ту ошибку, но переход все равно не происходит... HTML: <div><a name="-1" class="spoiler_links"><strong>-1</strong></a> <div class="spoiler_body"> <div><a name="1" class="spoiler_links"><strong>1</strong></a> <div class="spoiler_body"> <p><a href="#2" name="1-1">2</a></p> <p><a href="#sign-2.3.2-1" name="sign-2.3.2-3">3</a></p> </div></div></div></div> <br /><br /> <div><a name="0" class="spoiler_links"><strong>0</strong></a> <div class="spoiler_body"> <div><a name="2" class="spoiler_links"><strong>4</strong></a> <div class="spoiler_body"> <p><a href="#1" name="sign-2.3.2-1">5</a></p> <p><a href="#1-1" name="2-2">6</a></p> <p><a href="#sign-2.3.2-3" name="2-3">7</a></p> </div></div></div></div>
@WHITE_DRAGON, дело не в значениях якоря, а в том, что необходимо раскрывать все родительские элементы ссылки, к которой этот якорь адресован. Последняя структура html отличается от той, что вы показали в начале, поэтому и метод необходимо изменить closets на parents: Код (Javascript): // Вместо $('a[name="' + $(this).attr('href').replace('#', '') + '"]') .closest('.spoiler_body') .show(); // Пишем $('a[name="' + $(this).attr('href').replace('#', '') + '"]') .parents('.spoiler_body') .show();
Deonis, подскажите, а где мне почитать или с чего начать. Хочу чтоб ко всему сделанному, помимо нажатия и перехода к нужному якорю, хочу чтобы при наведении на ссылку: HTML: <p><a href="#sign-2.3.2-5" name="sign-2.3.2-3">3</a> Текст 3</p> предварительно показывало текст в появившемся поверх страницы div блоке в пределах тега <p></p>, где находится якорь: HTML: <p><a href="#sign-2.3.2-3" name="sign-2.3.2-5">5</a> Текст 5</p> на тот случай если пользователь не захочет нажимать и переходить по ссылке, а ему будет достаточно увидеть содержание. Я знаю что якорям нужно присвоить class и выдирать текст при помощи replace(), но какой jquery код писать не знаю...
Столкнулся только что с проблемой. На сайте код перехода к якорям не работает. скидывает на главную страницу, т.е. осуществляется переход по ссылке, которой впринципе нет... Код (Javascript): $(document).ready(function() { $('.spoiler_links').click(function() { $(this).parent().children('.spoiler_body').slideToggle('slow'); }); $('.spoiler_body a').on('click', function() { $('a[name="' + $(this).attr('href').replace('#','') + '"]') .parents('.spoiler_body') .slideToggle('slow'); }); }); ???
Я ошибся вчера с return false; Действие отменялось правильно для ссылок, по которым идёт раскрытие блока. Подправьте Код (Javascript): $('.spoiler_links').click(function() { $(this).parent().children('.spoiler_body').slideToggle('slow'); return false; }); // или $('.spoiler_links').click(function(e) { e.preventDefault(); $(this).parent().children('.spoiler_body').slideToggle('slow'); }); --- Добавлено --- Начинать нужно с нативного JS, но есть подозрение, что вы этому совету не последуете. А если говорить о jQuery, то тут в принципе достаточно знать методы и что каждый из них делает. Для этого хватит и справочника. Если с инглишем тоже туго, то вот ресурс на русском. Староват, но на первое время сойдёт.
Ошибка - да. А ссылки, по понятным причинам, в html. Есть же разница между: http://www.avto-tut.by/#87 http://www.avto-tut.by/pdd_rules.html#87 ?
Код (Javascript): $(document).ready(function() { $('.spoiler_links').click(function() { $(this).parent().children('.spoiler_body').slideToggle('slow') return false; }); $('.spoiler_body a').on('click', function() { $('a[name="' + $(this).attr('href').replace('#', '') + '"]') .parents('.spoiler_body') .slideToggle('slow') return false; }); }); в урезанном варианте все работает, а вживляю на сайт и всё... GAME OVER
Код (Javascript): $(document).ready(function() { $('.spoiler_links').click(function() { $(this).parent().children('.spoiler_body').slideToggle('slow') return false; }); $('.spoiler_body a:not(.spoiler_links)').on('click', function() { var href = $(this).attr('href'); $('a[name="' + href.substring(href.indexOf('#') + 1) + '"]') .parents('.spoiler_body') .show('slow'); }); });
Спасибо!!! Работает. Только почему то если многоуровневая вкладка, то не всегда в середине окна оказывает искомый якорь...???