jquery - 通过网址选择标签

我有以下的jQuery代码，允许我使用制表符，以在内容/ div之间回退和第四。我的问题是使用下面的代码，我怎么能根据url中的变量加载最初的选项卡？所以，如果我去默认TAB2负载somesite.com/page.php#tab2的则不用TAB1装载：jquery - 通过网址选择标签

$('.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; 
});

编辑

只是要注意这个代码是一个click事件，但是如果我想通过网址更改选项卡，那么它不会工作，除非他们单击一个选项卡。那么，我该如何获得它来倾听点击，并听取当前网址中是否有值？

来源

2011-10-08 John

您可以使用GUP功能，发现here：

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参数，并用它来导航到所选择的选项卡。

来源

2011-10-08 17:34:45 kgiannakakis

希望这将有助于： -

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/

来源

2011-10-08 17:37:38 KryptoniteDove

检测的网址片段（#whatever）的变化是很难做到跨浏览器没有一点帮助。我通常使用本Alman的烧烤插件：

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

如果我误解，你只是想设置基于初始URL加载选项卡，你可以做它通过检测哈希：

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

这是假设你的标签被链接到HREF =“＃富”，那你访问的网址是mysite.com/pagename#foo

来源

2011-10-08 18:39:46

你可以在使用window.location.hash一个URL的哈希值。从那里，你只需要做一些小的检查来确定应该显示哪个标签。

Here's a live example。请注意，我们实际上不能在jsFiddle中使用window.location.hash，因为它使用iFrames，这意味着您在浏览器地址栏中看到的地址不是代码本身会获得的值。因此，只需在代码中直接设置hash变量的值，即可玩转它。

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

<div>One</div> 
<div>Two</div> 
<div>Three</div>

那么你的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)实际存在，诉诸表示第一如果它没有（就像我们做散列分析不会产生合法的值）那样。

来源

2011-10-08 18:45:27 maxedison

jquery - 通过网址选择标签

回答

相关问题