Как мне запретить ссылке с хэштегом прокручивать страницу?

#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;
}
  

Понятия не имею, зачем они добавили такую вещь. Извините!