how to select a particular tab from other page using anchor tag in JQuery..?

I wonder if we can able to select a particular tab in a JQuery tab system from another page..?

For example I have a 4 menus that is Home | About | Services | Contact In services page I have a tab system with 5 tabs(Flight, Hotels, International Flight, Rail, Bus) in it, so I'm coming to the point is one who select Bus link from the home page I need to display the Bus tab(default visible one is Flight) in services page.

I have tried to give the bus link in home page like this.. services.php#tab4 (like anchor tag method)

unfortunately it doesn't work..

Im using the following JQuery for my tab system..

$(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active_pr").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

});

tab links in services pages given in ul li like below

<ul class="tabs">
        <li><a href="#tab1">Flight</li>
        <li><a href="#tab2">Hotels</a></li>
        <li><a href="#tab3">International Flight</a></li>
        <li><a href="#tab4">Rail</a></li>
        <li><a href="#tab5">Bus</a></li>
</ul>

I hope that someone can answer the above question.

Thanks

Paul

Answers:

Answer

This should be the complete implementation given your new request:

$(document).ready(function() {

    var strHash = document.location.hash;

    if (strHash == "") {

        // Go to the first tab as long as there's no other tab specified on which
        // to start.

        $(".tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active_pr").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content

    } else
        $("a[href='" + strHash + "']").parent().click();

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;

    });

});

The issue was that you were not considering that if there was a tab specified to go to (the document's hash), you still had that "//When page loads..." area running regardless. You could even shorten the first conditional's contents from:

    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active_pr").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

to:

    $("ul.tabs li:first").click();

... considering you already have the same basic functionality delineated in the later click event, but that's up to you. Also, you're welcome!

Answer

Before or after your click() definition, add this:

strHash = document.location.hash;

if (strHash != "")
    $("a[href='"+strHash+"']").parent().click();
Answer

(I've made a 'fiddle' on jsFiddle so you can test this answer.)

You code was almost correct; it seems that a few HTML errors may have been the cause. Assuming our HTML looks like:

<ul id="tabs">
        <li><a href="#tab1">Flight</a></li>
        <li><a href="#tab2">Hotels</a></li>
        <li><a href="#tab3">International Flight</a></li>
        <li><a href="#tab4">Rail</a></li>
        <li><a href="#tab5">Bus</a></li>
</ul>
<div id="tab1" class="tab_content">1</div>
<div id="tab2" class="tab_content">2</div>
<div id="tab3" class="tab_content">3</div>
<div id="tab4" class="tab_content">4</div>
<div id="tab5" class="tab_content">5</div>

... our JavaScript should be:

$(document).ready(function() {
    //When page loads, hide all content 
    $(".tab_content").hide();
    $(".tab_content:first").show(); //Show first tab content
    $("#tabs li:first").addClass("active").show(); //Activate first tab
    //On Click Event
    $("#tabs a").click(function() {

        //Remove any "active" class
        $("#tabs .active").removeClass("active");

        //Add "active" class to selected tab
        $(this).parent().addClass("active");

        // Hide all tab content
        $(".tab_content").hide();

        //Find the href attribute value to identify the active tab + content
        var a = $(this).attr("href");

        //Fade in the active ID content
        $(a).fadeIn();

        return false;
    });
});

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.