#javascript #jquery #hash
#javascript #jquery #хэш
Вопрос:
Это сводит меня с ума. Я создаю очень настраиваемый плагин slider jQuery для проекта. Одно из моих требований заключается в том, что пользователи должны иметь возможность делать глубокую ссылку на определенный слайд. Поэтому, естественно, все мои слайды имеют хэш-теги, а ссылки для навигации имеют соответствующие хэштеги. Моя проблема в том, что функциональность ссылок с хэштегом по умолчанию запускается поверх моей анимации скольжения, запускаемой javascript. То есть вместо перехода к слайду 4 он сразу переходит к слайду 4, а затем анимируется к слайду 8. Это несмотря на то, что я использую все возможные уловки, чтобы предотвратить функциональность по умолчанию. Вот фрагмент кода, о котором идет речь.
$(slider.nav).bind( 'click', function(event) {
event.preventDefault();
if( !$(this).hasClass('active') ) {
var target = slider.nav.index( $(this) );
slider.animate( target );
}
});
Как вы можете видеть здесь, я использовал event.preventDefault(). Я также пытался возвращать false . Не повезло вообще. Есть идеи?
Ответ №1:
Трудно сказать, не видя HTML. Но если все так, как я себе это представляю, вам не нужно сохранять href =»#» в ссылке, если она никуда не ведет. Вы можете использовать jQuery, чтобы просто получить следующий слайд или получить слайд номер 7, не полагаясь на ссылки href = «#».
Вместо этого вы можете сделать что-то вроде:
<ul id="slideshow">
<li id="slide_1">Slide 1</li>
<li id="slide_2">Slide 2</li>
<li id="slide_3">Slide 3</li>
</ul>
<a class="slide_nav" data-index="1">1</a>
<a class="slide_nav" data-index="2">2</a>
<a class="slide_nav" data-index="3">3</a>
<a class="slide_nav" data-index="4">4</a>
И в JS сделайте что-то вроде:
$('.slide_nav').click(function() {
var slides = $('#slideshow li'); // get all slides
var target_id = $(this).data('id') - 1; // Get the current ID and then subtract 1 (index starts at 0)
slider.animate(slides[target_id]);
});
В любом случае, это больше похоже на псевдопример, чем на что-либо другое, и я не уверен, что это сработало бы как есть, но код, надеюсь, должен указать вам направление, которое позволило бы избежать использования href=»#» и, таким образом, избежать проблемы, с которой вы столкнулись сейчас.
Удачи.
Комментарии:
1. Вы также могли бы преобразовать реальную ссылку с
#
атрибутомdata-index
rel
в.ready()
илиhref
на, а затем обнулить на, ,.
Ответ №2:
О боже. Мне действительно жаль. Я потратил впустую время каждого.
По-видимому, другой разработчик, работавший над сайтом, добавил немного javascript в другом месте, примерно в результате
if( window.location.hash ) {
window.location = window.location.hash;
}
Понятия не имею, зачем они добавили такую вещь. Извините!