CODEWITHSUNDEEP
jqueryhtmlcsstabs
Meagan Wiebler
Meagan Wiebler

Reputation: 49

Link directly to a jQuery tab from another page?

Let's begin by saying I'm skilled in HTML and CSS, but this jQuery stuff is kind of new to me. So this might be really easy to fix and I've looked at other answers but I can't get the hang of it.

I have a jQuery tab table set up with four tabs, like so:

<ul class="tabs">
    <li>
        <a rel="tab_1">Education Insurance</a>
    </li>
    <li>
        <a rel="tab_2">Home Insurance</a>
    </li>
    <li>
        <a rel="tab_3">Car Insurance</a>
    </li>
    <li>
        <a rel="tab_4">Business Insurance</a>
    </li>
</ul>

The content for each tab is in a separate div tag below it, like so:

<div class="panes">
    <div id="tab_1" class="tab-content">
        <p>Tab content goes here.</p>
    </div>

What I'm trying to do is create a link on the homepage that can link directly to tab 2 or tab 3, which are on a separate page. Can anyone help with this?

Upvotes: 4

Views: 9967

Answers (3)

Prasenjit Kumar Nag
Prasenjit Kumar Nag

Reputation: 13471

You can use jQuery UI tabs, thats does that automatically.

Here is a Working Fiddle

Tab Links

First tab

Second tab

Third Tab

Reference: JQuery UI tabs

Even better you can change the hash on select so that users can copy the url themselves like this

$('#tabs').tabs({
    select: function(event, ui) {
        window.location.hash = ui.tab.hash;
    }
});

​

Upvotes: 4

Selvam Palanimalai
Selvam Palanimalai

Reputation: 1560

I am assuming that all the content divs are visible and you need to scroll to that particular div when the user clicks on it. You just need to bind the button to a scroll event.

 $(document).ready(function() {
 $('button2').click = function (){
 $(document).scrollTo('#tab2');
 } 
 });

 $(document).ready(function() {
 $('button3').click = function (){
 $(document).scrollTo('#tab3');
 } 
 });

Now create two buttons with id 'button1' and 'button2'. For example.

<div id='button2'>Tab2</div>
or
<a href='#' id='button2'>Tab2</a>

When the user clicks on them he is taken to the content div.

Upvotes: 0

Jeff Watkins
Jeff Watkins

Reputation: 6357

It's in the documentation :) quite a simple snippet, I've used it myself.

var $tabs = $('#example').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});

If you want to do it "on load" of the page (i.e. the link on the homepage takes you to a different tabbed screen) you'd just want to pass something across in the request that the document load can decypher and use the .tabs("select", tabNo) as shown above. Again, I've done this in production code and it's reliable.

Upvotes: 0

Related Questions