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停止之前跳轉。我想我可能是錯的。

作爲替代方案，您可以爲網址提供一個不存在的定位名稱（例如「http://www.domain.com/aboutus/page#tab_c」）。 JavaScript會刪除tab_部分，然後顯示相應的選項卡。

Answer 2

嘗試錨添加一個名字：

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

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

基於您的代碼：

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

Answer 3

我已經與我的JavaScript在這裏完成它：http://www.starcraft-source.com/tv/#stream-2

//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; 
       } 
      }); 
     } 
    } 
}(); 

注意我是如何「米控制散頁上：parent.location.hash = 'stream-'+data.id;

Answer 4

你無法避免，但可以通過使用window.scrollTo滾動回到頁面頂端解決：

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