Question

我有一个包含3个标签的表单

<div class="tabs">
   <ul class="tabset">
     <li><a class="active"><span>Shirts</span></a></li>
     <li><a href="#"><span>Jeans</span></a></li>
      <li><a href="#"><span>Shoes</span></a></li>
   </ul>

  <div id="1">
    <p> Shirts </p>
   </div>
  <div id="2">
     <p> Jeans</p>
   </div>

   <div id="3">
     <p> Shoes</p>
   </div>
</div>

我希望能够从结果页面链接回特定选项卡，并使其成为活动选项卡。我知道我必须在结果页面锚点链接的url中使用查询字符串。

所以，如果我有3个类别的结果页面，并且每个结果页面的链接都返回到表单：

 <a href="./redefine?tab=id1"></a>
 <a href="./redefine?tab=id2"></a>
  <a href=".redefine?tab=id3"></a>

我需要在表单页面中使用哪些代码来确保其有效。我读过如果参数存在，我必须确保检查jquery并使用location.hash但不知道如何做。

Answer 1

使用并抓住location.hash 不会包含＃id1，所以只需触发ID

var hash = location.hash; // Get the hashtag
if(hash!=""){ // See if it contain something
    jQuery(hash.replace("#","")).trigger("click") // Remove # char from it and put the result as the selector..
}

Answer 2

您的代码段中没有外向链接。如果您尝试在页面中显示新内容而不发出其他HTTP请求，则不依赖于URL。只需将您的状态保存在某些变量中即可。

Answer 3

location.hash不代表查询字符串，而是代表锚引用（包含#）。

这意味着如果您拥有页面./redefine，则锚点可以是./redefine#1

查询字符串?1将触发浏览器真正转到该页面，其中#1只会使页面跳转到id="1"。

实施例：要使jQuery show只显示正确的页面，你可以这样做：

<强> HTML

<div class="tabs">
   <ul class="tabset">
     <li><a class="active" href="#1"><span>Shirts</span></a></li>
     <li><a href="#2"><span>Jeans</span></a></li>
      <li><a href="#3"><span>Shoes</span></a></li>
   </ul>

  <div class="tab" id="1">
    <p> Shirts </p>
   </div>
  <div class="tab" id="2">
     <p> Jeans</p>
   </div>

   <div class="tab" id="3">
     <p> Shoes</p>
   </div>
</div>

<强>的Javascript

$('.tab').hide();
$(window).bind('hashchange', function() {
    $('.tabset a').removeClass('active');
    $('.tab').hide();
    if (location.hash)
    {
       $('.tabset a[href="' + location.hash + '"]').addClass('active');
       $(location.hash).show();
    }
});

Answer 4

使用来自url的查询字符串和jQueryUI标签：

$(function(){
    /* get search string from url */
    var query = location.search;

    var reg = /\?tab=id/;

    /* if search query use that value, if not use zero*/
    var tab= (query  && query!='#') ? query.replace(reg,'') -1 : 0; 

    $('#tabs').tabs({ selected: tab});
})

使用jQueryUI标签从url使用hash：

$(function(){
    /* get search string from url */
    var query = location.hash;

    var reg = /\#/;

    /* if search query use that value, if not use zero*/
    var tab= (query && reg.test(query)) ? query.replace(reg,'') -1 : 0; 

    $('#tabs').tabs({ selected: tab});
})

链接到另一个页面的特定选项卡

4 个答案: