Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 715
  • Last Modified:

JQuery Tabs URL Link to select tab

I am using the below JQuery code for my tabs.

$(function () {
	var tabContainers = $('#Content > div');
	tabContainers.hide().filter(':first').show();
			
	$('#Services_Tabs a').click(function () {
		tabContainers.hide();
		tabContainers.filter(this.hash).show();
		$('#Services_Tabs li').removeClass('Current_Services_Tab');
		$(this).parent().addClass('Current_Services_Tab');
		return false;
	}).filter(':first').click();
});

Open in new window


HMTL below:

<div id="Services_Tabs">

<ul>
<li><a href="#first">Extentions &amp; Conversion</a></li>
<li><a href="#second">Refurbishment &amp; Maintenance</a></li>
<li><a href="#third">Kitchens &amp; <br /> Bathrooms</a></li>
<li><a href="#forth">Plumbing &amp; <br /> Damp proofing</a></li>
<li><a href="#fifth">General building, Electrical &amp; Decorating</a></li>
</ul>

</div>

<div id="Content">

<div id="first">

tyjtyjtyjrtyjty
  
</div>

<div id="second">

tyjtjtyj
  
</div>

<div id="third">

tryjtrj
  
</div>

<div id="forth">

reghegrhreg
  
</div>

<div id="fifth">

fghrgrg

</div>

</div>

Open in new window


How can I link to a particular tab from another page. i.e. Instead of when the page opens it shows particular tab instead of just the first one.
0
petewinter
Asked:
petewinter
  • 2
  • 2
3 Solutions
 
Pravin AsarPrincipal Systems EngineerCommented:
Look the code.

<script type="text/javascript">
      $(document).ready(
            function()
            {
                  $('#my-text-link1').click(function() { // bind click event to link
                        var $tabs = $('#tabs').tabs();
                            $tabs.tabs('select', 0); // switch to first tab
                            return false;
                  });
                  $('#my-text-link2').click(function() { // bind click event to link
                        var $tabs = $('#tabs').tabs();
                            $tabs.tabs('select', 1); // switch to first tab
                            return false;
                  });                  return;
            }
      );
</script>

<div id="tabs">
      <ul style="color:#ff0000;">
            <li><a href="#tabs-1">Stage Events</a></li>
            <li><a href="#tabs-2">Registration Form</a></li>
            <li><a href="#tabs-3">Contact</a></li>
      </ul>
      <div id="tabs-1">
            <p>TAB 1</p>
      </div>
      <div id="tabs-2">
            <p>TAB 2</p>
      </div>
      <div id="tabs-3">
       <p>TAB 3</p>
       <div style="text-align:center;">
       <a id="my-text-link1" href="#">GOTO TAB 1</a>
       </div>
       <div style="text-align:center;">
       <a id="my-text-link2" href="#">GOTO TAB 2</a>
       </div>
      </div>
</div>
0
 
petewinterAuthor Commented:
Thanks, but is that based of the URL parameter?
0
 
leakim971PluritechnicianCommented:
0
 
leakim971PluritechnicianCommented:
Retrieve a gup function, for example : http://www.netlobo.com/url_query_string_javascript.html

var $tabs = $('#tabs').tabs();
var tab = gup('tab_number_to_open'); // i.e : http://www.domain.com?page.html?tab_number_to_open=2
$tabs.tabs('select', tab);

Open in new window

0
 
petewinterAuthor Commented:
Many thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

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