2011-11-11 12 views
2

これは私を絶対に狂ってしまう。私はプロジェクトのための非常にカスタマイズされたスライダーjQueryプラグインを構築しています。私の要件の1つは、ユーザーが特定のスライドに深くリンクできることです。当然、私のスライドにはすべてハッシュタグがあり、ナビゲーションリンクには対応するハッシュタグがあります。私の問題は、ハッシュタグのリンクのデフォルトの機能が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を返そうとしました。まったく運がない。何か案は?

+0

http://jsfiddle.net/36vQ7/1/ –

答えて

1

HTMLを見なければ言い難いです。しかし、それが想像しているような方法なら、リンクにhref = "#"を置いておく必要はありません。 jQueryを使用して次のスライドを取得するか、href = "#"リンクに頼らずにスライド番号7を得ることができます。

代わりに、あなたのような何かを行うことができます:それは何よりも擬似例のようなものだ、とにかく

$('.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]); 
}); 

、およびI:

<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での、何かのように行いますそのままで動作するのかどうかは分かりませんが、コードではhref = "#"を使用しないように指示して、今問題が発生していないことを確認してください。

幸運。

+2

実際のリンクを '#'で '.ready()'の 'data-index'や' rel'属性に変換してから、 'href'をゼロにします。 –

0

ああジーズ。本当にごめんなさい。私はみんなの時間を無駄にした。

はどうやらサイトで働いていた別の開発者は、彼らがそのようなことを追加する理由

if(window.location.hash) { 
    window.location = window.location.hash; 
} 

ノーアイデアの効果に他の場所でおよそいくつかのJavaScriptを追加しました。ごめんなさい!

関連する問題