Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

JQuery Tabs URL Link to select tab

Posted on 2012-03-15
5
Medium Priority
?
706 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 29

Assisted Solution

by:Pravin Asar
Pravin Asar earned 400 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 1600 total points
ID: 37731482
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 1600 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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 rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

688 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