jQuery的添加在页面加载显示要求标签功能

Question

我用jQuery新手，

<script type="text/javascript" charset="utf-8"> 
    $(function() { 
     var tabContainers = $('div.tabs > div'); 
     tabContainers.hide().filter(':first').show(); 

     $('div.tabs ul.tabNavigation a').click(function() { 
      tabContainers.hide(); 
      tabContainers.filter(this.hash).show(); 
      $('div.tabs ul.tabNavigation a').removeClass('selected'); 
      $(this).addClass('selected'); 
      return false; 
     }).filter(':first').click(); 
    }); 


</script> 

我需要的是能够装载特定的标签时，打开一个和我已经用标签验证码网址，如： www.mysite.com/page.html#tab1

HTML链接看起来是这样的：

<a href="#tab1" class="selected">name link</a> 
<a href="#tab2" class="">name link2</a> 
<a href="#tab3" class="">name link3</a> 

我tryied很多的脚本，但也许是我的错（我是一个伙计与JavaScript）

预先感谢您

Answer 1

1. 你需要一个像<a href="#tab1">click to see tab1</a>

2. 您需要将用户重定向到＃TAB1锚所以你必须删除你的功能的return false;行，这将禁用重定向

3. 当你单击了<a>时你的功能被触发，你需要再次触发它，当页面是在g负载

的功能将类似于

$(function(){ 
    onClickHandler = function() { 
     $('div.tabs > div').hide(); 
     $(window.location.hash).show(); 
    } 
    $('div.tabs ul.tabNavigation a').click(onClickHandler); 
    onClickHandler(); 
}); 

Answer 2

你想用默认显示的标签应该有一类selected在你的HTML。所以应该关联内容包装。其他人不应该。

Answer 3

JQuery-UI有一个tab-widget你可以使用。

比写自己更简单，更稳定。

对于不同的URL请看看this post。

它告诉你如何利用UI主题和加载不同的URl。

否则你必须做的click事件的$('#theIdOfTheDiv').load(url)在标签

Answer 4

window.location的具有散列属性。所以，你可以检查它是否为空，如果它不是空的，选择该选项卡：

if(!window.location.hash === "") 
    $(window.location.hash).show();