У меня есть страница с некоторыми вопросами и ответами, ответы по умолчанию сворачиваются. Когда они нажимают на вопрос, я разворачиваю скрытый ответ-div. Проблема в том, что когда я нажимаю на эти вопросы, окно переходит в верхнюю часть экрана. Это не огромная проблема, но я нахожу это раздражающим, потому что мне нужно снова прокрутиться до вопроса.
Ссылки просто выглядят следующим образом:
<a href="#" id="myID">Myquestion</a>
И я использовал jQuery и .click как event-listener.
Есть ли какие-либо простые способы избежать этого, или мне нужно использовать .scroll и найти координаты вопроса? Я бы предпочел избежать этого.
EDIT: Я знаю, что я могу использовать якоря, чтобы сделать это, но я бы хотел вообще избежать прыжка экрана.
Вам нужно добавить preventDefault() к вашему обработчику кликов. Это заставит браузер выполнять собственный обработчик ссылок и будет запускать только указанный вами код.
Пример:
$("#myID").click(function(e) {
e.preventDefault();
// Do your stuff
});
Не используйте теги A для задач, которые не связаны с навигацией. Это не семантическая разметка и не грамотно деградирует. Вместо этого используйте кнопки.
Вы можете сделать это очень просто:
Просто добавьте ! в конец вашего href:
<a href="#!" id="myID">Myquestion</a>
Альтернативными способами jQuery являются:
$("#myID").click(function(e) {
e.preventDefault(); // one way
return false; // second way prevent default click action from happening
});
$("#myID").click(function(e) {
if(e.preventDefault)
e.preventDefault();
else
e.stop();
});
e.preventDefault() не работал в более старых версиях IE.
Фактически, самый простой способ сделать это - удалить атрибут href из тэга привязки. Начиная с HTML5, метки привязки не должны включать атрибуты href в семантический.
Итак,
<a id="myID">Myquestion</a>
вместо
<a href="#" id="myID">Myquestion</a>
Это работает в IE8 +, Chrome и Firefox. Обратите внимание, что: стили ссылок css не применяются к тегам привязки, которые не включают атрибуты href.
Если вам нужен атрибут href и/или совместимость с IE7, то
$("#myID").click(function(e) {
if(e.preventDefault)
e.preventDefault();
else
e.stop();
});
вероятно, лучший способ.
$('a').click( function() {
if ($(this).attr("href") == window.location.hash) {
event.preventDefault()
}
});
Вы ищете event.preventDefault (см. jQuery API).
$(...).click(function(e) {
e.preventDefault();
// your code
});
Внутри вашей функции:
And I've used jQuery and .click as event-listener.
Будет выглядеть примерно так:
$("#myID").click(function(){});
Измените это на (не забудьте параметр param внутри function(e):
$("#myID").click(function(e){
e.preventDefault();
});
Пример с хорошей прокруткой для ответа на содержимое:
$("#question_title").click(function(){
var $answer=$("#answer");
$answer.slideDown();
$.scrollTo( $answer, 800 );
return false;
});
Я использую jQuery scrollTo плагин.
$('body').on('click', '[href^=#]', function (e) {
e.preventDefault()
});
если селектор ex.. "body" присутствует во время первоначального рендера, затем используйте любой селектор.. id..., чтобы нацелить генератора на то, чтобы выполнить jQuery (начиная с 1.8.2). "On handler вызывается метод под названием" bind ", который используется для вновь добавленного контента в DOM". Используя "[href ^ = #], выберете любые href, которые находятся в теге раздела, но вы можете заменить раздел ничем или ничем и применяете отмену события click.Этот метод отлично подходит для динамически созданного контента для DOM
Если вы добавите "\" в "#", это не позволит перейти в начало.
<a href="#\" id="myID">Myquestion</a>
HTML:
<a id="like-post" href="#\">like</a>
JavaScript:
$('body').delegate('#like-post','click',function(e) {
e.preventDefault();
.....
});