jQuery：「ページジャンプなし」のURLを持つタブ

Question

私はタブがあり、アドレスバーに貼り付けると各タブのURLに正しい/アクティブなタブが表示されるようにする必要があります。

スクリプト：

$(function() { 
    $('.tabs span').click(function(){ 
     switch_tabs($(this)); 
     return false; 
    }); 
    switch_tabs($('.defaulttab')); 
}); 

function switch_tabs(obj) { 
    $('.tab-content').hide(); 
    $('.tabs span').removeClass("selected"); 
    var id = obj.attr("rel"); 
    $('#'+id).show(); 
    obj.addClass("selected"); 
} 

はHTML：

<ul class="tabs"> 
    <li><a href="#a"><span rel="a" class="defaulttab">A</span></a></li> 
    <li><a href="#b"><span rel="b">B</span></a></li> 
    <li><a href="#c"><span rel="c">C</span></a></li> 
    <li><a href="#d"><span rel="d">D</span></a></li> 
    <li><a href="#e"><span rel="e">E</span></a></li> 
</ul> 
<div class="tab-content" id="a">content</div> 
<div class="tab-content" id="b">content</div> 
<div class="tab-content" id="c">content</div> 
<div class="tab-content" id="d">content</div> 
<div class="tab-content" id="e">content</div> 

だから、誰かが例えば自分のブラウザに "http://www.domain.com/aboutus/page#c" を貼り付けた場合、ブラウザがそのページに行き、タブCがアクティブですが、ページがジャンプしません。

これは意味がありますか？

ありがとうございました。

Answer 1

あなたはそれを変更できるかどうかはわかりません。 AFAIK、JavaScriptがJavaScriptを停止させる前にブラウザがジャンプします。私は間違っているかもしれないと思う。

代わりに、存在しないアンカー名をURLに指定することもできます（例： "http://www.domain.com/aboutus/page#tab_c"）。 JavaScriptはtab_部分を削除し、適切なタブを表示します。

Answer 2

アンカーの名前を追加してみてください：

<li><a href="#c" name="c"><span rel="c">C</span></a></li> 

Answer 3

私はJavaScriptを使用して、ここでそれをやった：http://www.starcraft-source.com/tv/#stream-2

あなたのコードに基づいて

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_bookmark

Something like <a name="C4">Chapter 4</a> 

//assuming `#tab1` is your hash, `tab1` will be shown 
    if (parent.location.hash.length > 0) { 
      showTab(parent.location.hash); 
    } 

また、ここで私はそれを使用する方法ですhref="tab1"

のようなあなたのタブを結ぶ必要だろう...

Spire.Tv = function() { 
    return { 
     init: function() { 
      if (parent.location.hash.length > 0) { 
       this.loadStream(parent.location.hash.split('-')[1]); 
      } 

      $('.stream').bind('click', function (e) { 
       Spire.Tv.loadStream($(e.currentTarget).attr('id')); 
      }); 

      $('#rightbar-full a.stream').bind('click', function (e) { 
       Spire.Tv.loadStream($(e.currentTarget).attr('id')); 
      }); 
     }, 
     loadStream: function (id) { 
      $.ajax({ 
       type: 'post', 
       url: webRoot + "/lib/ajax/site/tv/getStream.php", 
       data: { 
        id: id 
       }, 
       dataType: 'json', 
       success: function (data) { 
        $('#screen').html(data.screen); 
        parent.location.hash = 'stream-'+data.id; 
       } 
      }); 
     } 
    } 
}(); 

のお知らせどのようにI "mはページ上のハッシュを制御する：あなたはparent.location.hash = 'stream-'+data.id;

Answer 4

それを避けることはできませんが、window.scrollToを使用してページの先頭に戻るスクロールすることにより回避することができます。

setTimeout(function() { 
    if(location.hash) { 
    window.scrollTo(0, 0); 
    } 
}, 1);