Question

我有以下jquery代码，允许我使用选项卡，选项卡返回和内容/ div之间的第四个。我的问题是使用下面的代码，我如何根据网址中的变量加载初始标签？所以，如果我去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;
});

修改

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

Answer 1

你可以使用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参数并使用它导航到选定的选项卡。

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/

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

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

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

Answer 4

您可以使用window.location.hash在网址中获取哈希值。从那里，你只需要做一些细微的检查，以确定应该显示哪个标签。

Here's a live example。请注意，我们实际上无法在jsFiddle中使用window.location.hash，因为它使用iFrame，这意味着您在浏览器的地址栏中看到的地址不是代码本身将获得的值。因此，您只需在代码中直接设置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)实际存在，如果不存在则显示第一个选项卡（就像哈希分析不产生合法值一样）。 / p>

Jquery - 通过网址选择标签

4 个答案: