JQuery Tabs URL Link to select tab

Posted on 2012-03-15
Last Modified: 2012-03-18
I am using the below JQuery code for my tabs.

$(function () {
	var tabContainers = $('#Content > div');
	$('#Services_Tabs a').click(function () {
		$('#Services_Tabs li').removeClass('Current_Services_Tab');
		return false;

Open in new window

HMTL below:

<div id="Services_Tabs">

<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>


<div id="Content">

<div id="first">


<div id="second">


<div id="third">


<div id="forth">


<div id="fifth">




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.
Question by:petewinter
  • 2
  • 2
LVL 28

Assisted Solution

by:Pravin Asar
Pravin Asar earned 100 total points
ID: 37729033
Look the code.

<script type="text/javascript">
                  $('#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;

<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>
      <div id="tabs-1">
            <p>TAB 1</p>
      <div id="tabs-2">
            <p>TAB 2</p>
      <div id="tabs-3">
       <p>TAB 3</p>
       <div style="text-align:center;">
       <a id="my-text-link1" href="#">GOTO TAB 1</a>
       <div style="text-align:center;">
       <a id="my-text-link2" href="#">GOTO TAB 2</a>

Author Comment

ID: 37730063
Thanks, but is that based of the URL parameter?
LVL 82

Assisted Solution

leakim971 earned 400 total points
ID: 37731482
LVL 82

Accepted Solution

leakim971 earned 400 total points
ID: 37731490
Retrieve a gup function, for example :

var $tabs = $('#tabs').tabs();
var tab = gup('tab_number_to_open'); // i.e :
$tabs.tabs('select', tab);

Open in new window


Author Closing Comment

ID: 37735516
Many thanks

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Polygon I google maps 1 14
Centered Image 2 22
css img-response wont work properly 7 17
CSS Logo Problem. 2 7
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now