Linking to a specific tab from another page

问题

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>

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.

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>

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.

回答1:

Use and grab the location.hash will not contain #id1, so just trigg that 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..
}

回答2:

There is no outgoing link in your code snippet. If you are trying to display new content within the page without making another HTTP request, you are not depending on the URL. Just save your status in some variables.

回答3:

location.hash does not represent the querystring, but the anchor reference (with # included).

This means if you have the page ./redefine an anchor could be ./redefine#1

The querystring ?1 will trigger the browser to really go to the page, where #1 will just make the page jump to id="1".

Example: To make jQuery show only show the correct page, you could do:

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

回答4:

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

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

来源：https://stackoverflow.com/questions/9636848/linking-to-a-specific-tab-from-another-page

标签

javascript

jquery

tabs