Jquery – 通过url选择选项卡

我有以下jquery代码，允许我使用选项卡，选项卡返回和内容/ div之间的第四个。 我的问题是使用下面的代码，我如何根据url中的变量加载初始标签？ 所以如果我去somesite.com/page.php#tab2，那么默认情况下tab2加载而不是tab1加载：

$('.tabcontent > div').hide(); $('.tabcontent > div:first-child').show(); $('.tabs > li:first-child').addClass('selected'); $('.tabs > li a').click(function() { var tab_id = $(this).attr('href'); $(tab_id).parent().children().hide(); $(tab_id).fadeIn(); $(this).parent().parent().children().removeClass('selected'); $(this).parent().addClass('selected'); return false; }); 

编辑

只是要注意这个代码是一个点击事件，但是如果我想通过人们加载的url更改标签，那么除非他们点击一个标签，否则它不会工作。 那么我怎样才能听到点击并听取当前url中是否存在值？

Answer 1

你可以使用gup函数，在这里找到：

 function gup( name ) { name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); var regexS = "[\\?&]"+name+"=([^&#]*)"; var regex = new RegExp( regexS ); var results = regex.exec( window.location.href ); if( results == null ) return ""; else return results[1]; } 

这将允许您读取URL参数并使用它来导航到选定的选项卡。

Answer 2

希望这会有所帮助： –

 var tab_id = $(this).attr('href'); var split = tab_id.split('#'); split = split[1]; if (split = "page 2") { window.alert(split); } else { // Default condition } 

JS小提琴示例在这里 – http://jsfiddle.net/aNMBW/

Answer 3

在没有一点帮助的情况下，检测URL片段（#whatever）的变化很难做到crossbrowser。 我通常使用Ben Alman的BBQ插件：

http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/

如果我误解了你只想加载基于INITIALurl的标签，你可以通过检测哈希来做到这一点：

 ... if(window.location.hash){ $(".tabs > li a[href=" + window.location.hash + "]").click(); } 

这假设您的标签链接到href =“＃foo”，并且您访问的url是mysite.com/pagename#foo

Answer 4

您可以使用window.location.hash在URL中获取哈希值。 从那里，您只需要进行一些轻微检查以确定应显示哪个选项卡。

这是一个实例 。 请注意，我们实际上不能在jsFiddle中使用window.location.hash ，因为它使用iFrames，这意味着您在浏览器的地址栏中看到的地址不是代码本身将获得的值。 因此，您可以直接在代码中设置hash变量的值来解决它。

无论如何，假设这是你的HTML：

 
One
 
Two
 
Three 

然后你的JavaScript将是：

 $(function(){ hash = window.location.hash index = parseInt(hash.replace('tab','')) - 1; if(isNaN(index)){ //if the hash isn't a valid tab index = 0; } $('div').eq(index).show(); }); 

您可能还应首先检查以确保$('div').eq(index)实际存在，如果不存在则显示第一个选项卡（就像哈希分析不产生合法值一样） ）。