Solved

JQuery Tabs URL Link to select tab

Posted on 2012-03-15
5
696 Views
Last Modified: 2012-03-18
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
Comment
Question by:petewinter
  • 2
  • 2
5 Comments
 
LVL 28

Assisted Solution

by:Pravin Asar
Pravin Asar earned 100 total points
ID: 37729033
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
 

Author Comment

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

Assisted Solution

by:leakim971
leakim971 earned 400 total points
ID: 37731482
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 400 total points
ID: 37731490
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
 

Author Closing Comment

by:petewinter
ID: 37735516
Many thanks
0

Featured Post

ScreenConnect 6.0 Free Trial

Check out the updates in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI that improves session organization and overall user experience. See the enhancements for yourself!

Question has a verified solution.

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

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

803 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