• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 439
  • Last Modified:

Jquery open tab based on url

See my code below. How do I adapt it so it automatically opens the tab based on the url and scroll down to the correct position on the page.

i.e. mydomain.com/page.php#gallery   will open gallery tab and move down.

Jquery
$(function () {
    var info_tabContainers = $('#Tabs-Container-Contents > div');
    
    $('div.info_tabs ul.info_tabNavigation a').click(function () {
        info_tabContainers.hide().filter(this.hash).show();
        
        $('div.info_tabs ul li').removeClass('Info_Tabs_selected');
        $(this).parent().addClass('Info_Tabs_selected');
        
        return false;
    }).filter(':first').click();
	});

Open in new window


html
<div id="Info_Tabs">

<div class="info_tabs">
  <!-- tabs -->
  <ul class="info_tabNavigation">
    <li class="Info_Tabs_selected"><a href="#what">What You'll See</a></li>
    <li><a href="#gallery">Showroom Gallery</a></li>
    <li><a href="#visitor">Showroom Location</a></li>
  </ul>

  <div id="Tabs-Container-Contents">
  <!-- tab containers -->
  <div id="what" class="Info_Tabs-Container">
      
     tab 1 content
      
  </div>
  <div id="gallery" class="Info_Tabs-Container">
    
    tab 2 content
    
  </div>
  <div id="visitor" class="Info_Tabs-Container">
     tab 3 content
  </div>
  </div>
</div>

</div>

Open in new window

0
petewinter
Asked:
petewinter
1 Solution
 
nap0leonCommented:
To scroll to a hash based on a page load event, you need to add anchors with the name of the hash.
e.g.,
<a name="gallery">

Open in new window


Now to make the page scroll to that location when you update the hash outside of a pageload event, you can trigger the ".animate" method inside of your .click() routine that does the hide/show stuff.  Here is a function I found on stackoverflow that works nicely:
function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

Open in new window


and add this line to your .click() routine:
scrollToAnchor(this.hash);

Open in new window


Altogether, it looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Q_28623324.html</title>
	<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<style type="text/css">
.make_page_tall_enough_to_cause_scrolling { height:1000px; }
</style>
</head>

<body>
<div id="Info_Tabs">

	<div class="info_tabs">
	  <!-- tabs -->
	  <ul class="info_tabNavigation">
	    <li class="Info_Tabs_selected"><a href="#what">What You'll See</a></li>
	    <li><a href="#gallery">Showroom Gallery</a></li>
	    <li><a href="#visitor">Showroom Location</a></li>
	  </ul>
	
	  <div id="Tabs-Container-Contents">
	  <!-- tab containers -->
	  <div id="what" class="Info_Tabs-Container">
	     <a name="what">
	     tab 1 content
	      
	  </div>
	  <div id="gallery" class="Info_Tabs-Container">
     	    <a name="gallery">
	    tab 2 content
	    
	  </div>
	  <div id="visitor" class="Info_Tabs-Container">
     	    <a name="visitor">
	     tab 3 content
	  </div>
	  </div>
	</div>
</div>
<div class="make_page_tall_enough_to_cause_scrolling">
	<p>Some stuff here</p>
</div>
<script>
function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

$(function () {
    var info_tabContainers = $('#Tabs-Container-Contents > div');
    
    $('div.info_tabs ul.info_tabNavigation a').click(function () {
        info_tabContainers.hide().filter(this.hash).show();
        
        $('div.info_tabs ul li').removeClass('Info_Tabs_selected');
        $(this).parent().addClass('Info_Tabs_selected');
	scrollToAnchor(this.hash);
        
        return false;
    }).filter(':first').click();
});
</script>
                                  
</body>
</html>

Open in new window

0
 
petewinterAuthor Commented:
Many thanks
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now