链接到另一个页面的特定选项卡 [英] Linking to a specific tab from another page

问题描述

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

I have a form with 3 tabs

<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中使用查询字符串。

I would like to be able to link back to a specific tab from a results page and make it the active tab. I know that I have to make use of query string in the url from the results page anchor link.

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

So, if I have the 3 category results pages and each one have the link back to the form as:

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

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

What code I need to use in the form page to make sure this works. I read I have to make sure check with jquery if the parameter exists and make use of the location.hash but not sure how to do that.

推荐答案

使用带有jQueryUI标签的url查询字符串：

To use query string from url with jQueryUI tabs:

$(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哈希：

To use hash from url with jQueryUI tabs:

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

这篇关于链接到另一个页面的特定选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！