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);