Linking directly to a tab

Question

I am using HTML / JQuery to have tabs on my page and it works fine.

Here is the code:

$("#content div").hide(); // Initially hide all content
$("#tabs li:first").attr("id", "current"); // Activate first tab
$("#content div:first").fadeIn(); // Show first tab content
$('#tabs li a').click(function (e) {
    e.preventDefault();
    if ($(this).attr("id") == "current") { //detection for current tab
        return
    } else {
        $("#content div").hide(); //Hide all content
        $("#tabs li").attr("id", ""); //Reset id's
        $(this).parent().attr("id", "current"); // Activate this
        $($(this).attr('href')).fadeIn(); // Show content for current tab
    }
});

and then the html:

<ul id="tabs">
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
</ul>

<div id="tab1">
    TAB 1
</div>

<div id="tab2">
    TAB 2
</div>

<div id="tab3">
    TAB 3
</div>

My problem is that I need to find a way of linking straight to the tabs when required.

Any ideas on how to do this?

Please elaborate _linking straight to the tabs when required_ — Satpal, Apr 30 '14 at 12:04
What do you mean linking straight to the tabs? Do you mean when they type in a url like site.com/tab3 then that tab will be visible? — MarkP, Apr 30 '14 at 12:05
Yes, tried the #tab1 but that wouldn't work. everytime to page reloads it's loading the first tab...I want to be able to control which tab it loads...Basically controlling which tab show as selected. — Satch3000, Apr 30 '14 at 12:08

score 1 · Answer 1 · edited Apr 30 '14 at 12:11

1

put this on document ready:

$('#tabs li a[href="' + window.location.hash + '"]').click()

now adding the hashes to the url should display the tabs:

edited Apr 30 '14 at 12:11

A. Wolff

74,033
9
94
155

answered Apr 30 '14 at 12:09

Moshe Shaham

15,448
22
74
114

score 0 · Answer 2 · edited May 23 '17 at 11:57

0

I would check this out: How to get the anchor from the URL using jQuery?

its about getting the anchor from the url. Then based on the result add the class current to the tab you want to show

edited May 23 '17 at 11:57

Community

1
1

answered Apr 30 '14 at 12:07

MarkP

2,546
5
31
48

score 0 · Answer 3 · answered Apr 30 '14 at 12:12

0

is this u are looking for: http://jsfiddle.net/xZts2/

$('#tabs li a').click(function(e) {
            $('#content div').hide();   
            $($(this).attr('href')).fadeIn();         

    });

Because u have set the href as their corresponding tabs

answered Apr 30 '14 at 12:12

Ashok Damani

3,896
4
30
48

Linking directly to a tab

3 Answers3