CODEWITHSUNDEEP
javascriptjquerytabs
Maramor
Maramor

Reputation: 43

Make tab active, utilizing existing code

First off, I apoligize if I am missing anything you may need and for a kind of vague question. I am in a bind and have tried my best for several weeks to find a solution.

I have the following code which is a tab selection code. I don't relly know much jquery and only enough JavaScript to get by the basics. I don't really understand all the code below but I do get that it controls what happens when you click the tab and initial load of page. Correct?

The goal is to be able to provide a link from another site and make Tab_2 or Tab_3 active. Currently the first tab (Tab_1) is always the active tab when visiting a site. I need a user to see the content in another tab on page load and still be able to click each tab to change.

I hope this makes since to the jquery guru's out there.

Here is the jquery that handles the tabs.

//Add to Global JS File
$(document).ready(function() {
    initTabbedHomeContent();
});


function initTabbedHomeContent() {
var tabsPanel = $('.home');

if (tabsPanel.length > 0) {
    var tabTitles = "";

    $.each($('.tab_container .tab'), function(i) {
        //var tabid = 'tab' + i
        //$(this).attr('id', 'tab' + i);

        var tabid = $(this).find('h2').eq(0).text()
        var tabid = tabid.replace(/\s+/g,'_')
        $(this).attr('id', tabid);
        $(this).addClass("tabsActive");

        //tabTitles += '<li><a href="#tab' + i + '"><span>' + $(this).find('h2').eq(0).text() + '</span></a></li>';
        tabTitles += '<li><a href="#' + tabid  + '"><span>' + $(this).find('h2').eq(0).text() + '</span></a></li>';
    });

    $('.tab_container').prepend('<ul class="tabs">' + tabTitles + '</ul>');
    $(".tab_container .tab, .tab_container .tab h2").hide();
    $("ul.tabs li:first").addClass("first");

    //This chooses the first item when nothing else is selected.
    $("ul.tabs li:first").addClass("active").show();
    $(".tab_container .tab:first").show();

    //ON Click Event
    $("ul.tabs li").unbind().click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_container > .tab").hide();
        var activeTab = $(this).find("a").attr("hash");
        $(activeTab).show();
       return false;
    });


    $(document).ready(function() {
        var activeTab = location.href;
        var activeTabId = activeTab.substring(activeTab.lastIndexOf('#')+1);
        var activeTab = $(activeTabId).prev('li');
        //$(activeTab).addClass("active");

        //alert($(activeTabId));

        //alert($(activeTab).html());
        return false;
    });


}

Here is the html piece.

<body class="home">
        <div class="heading">
            <br/><br/><br/><br/><br/><br/><br/>
            bla bla bla heading text goes here.
            <br/><br/><br/><br/><br/><br/><br/>
        </div>
        <div class="tab_container">
            <div class="tab">
                <div class="sp3column">
                <h2>Tab 1</h2>
                    bla bla bla Tab 1 text goes here.
                </div>
            </div>
            <div class="tab">
                <div class="sp3column">
                    <h2>Tab 2</h2>
                    bla bla bla Tab 2 text goes here.
                </div>
            </div>

            <div class="tab">
                <div class="sp3column">
                    <h2>Tab 3</h2> <!-- tab title -->
                    bla bla bla Tab 3 te xt goes here.
                </div>                                          
            </div>
        </div>

</body>

Upvotes: 1

Views: 585

Answers (1)

Maramor
Maramor

Reputation: 43

First off, thank you for reading. I guess just typing it up gave me some ideas that I didn't think about. Sometimes taking a step back makes things clearer.

Added

//To capture querystrings
var urlParams = {}; 
(function () {     
    var match,         
    pl     = /\+/g,  // Regex for replacing addition symbol with a space         
    search = /([^&=]+)=?([^&]*)/g,         
    decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },         
    query  = window.location.search.substring(1);      

while (match = search.exec(query))        
    urlParams[decode(match[1])] = decode(match[2]);
})();

created array variable to the beginning of the function to support checking if tabid exists.

var tabArray = [];

Just above "tabTitles" I add "tabid" to the new array to support checking if tabid exists.

tabArray.push(tabid);

Modified the line that defines "tabTitles" to define li class as tabid

tabTitles += '<li class="'+ tabid +'"><a href="#' + tabid  + '"><span>' ...

Modified the "//This chooses the first item when nothing else is seleced." area. Please note I test if tabid exists this way if it does not it will still render the first tab and no one will be the wiser. This will help prevent odd behavior.

    //Checks to see if querystring for tabid
    if (urlParams["tabid"] !== undefined) {
         //check array to see if tabid exists
        if ($.inArray(urlParams["tabid"], tabArray) !== -1) {
            //Will use the identified tabid and make it the active tab
            $("ul.tabs ."+urlParams["tabid"]).addClass("active").show();
            var activeTab = $("ul.tabs ."+urlParams["tabid"]).find("a").attr("hash");
            $(activeTab).show();
        }else {
            //This chooses the first item when nothing else is selected.
            $("ul.tabs li:first").addClass("active").show();
            $(".tab_container .tab:first").show();   
        }   
    }else {
        //This chooses the first item when nothing else is selected.
        $("ul.tabs li:first").addClass("active").show();
        $(".tab_container .tab:first").show();      
    }

Now I can have a link, "bla.asp?tabid=Tab_2" and the second tab will be selected.

Upvotes: 1

Related Questions