How to trigger tab using jQuery

2.6k views Asked by At

I have to open table based on the query string, i have tried few thing but it doesn't seem to work

http://codepen.io/anon/pen/ygyzLX

if (tabid == "tabD3") {
    $('.donate-tab li:nth-child(3)').toggleClass('active');
    $('.donate-tab li:nth-child(3) a').trigger("click");
    // $('a.#tabD3').trigger("click");
}

$('.donate-tab li:nth-child(3)').toggleClass('active'); higlight the tab but doesn't show the content.

Below code doesn't make any difference

$('.donate-tab li:nth-child(3) a').trigger("click");
// $('a.#tabD3').trigger("click");
1

There are 1 answers

2
Learning On BEST ANSWER

I manage to make it work with following script

 var getQueryString = function (field, url) {
            var href = url ? url : window.location.href;
            var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
            var string = reg.exec(href);
            return string ? string[1] : null;
        };

        var tabid = null;
        tabid = getQueryString('tab'); // returns 'chicken'
        if (tabid !=null)
        {
            $('.donate-tab li').removeClass('active');
            $('.tab-content > .tab-pane').removeClass('active');

            if (tabid == "tabD1") {
                $('.donate-tab li:nth-child(1)').toggleClass('active');
                $('.tab-content #tabD1').toggleClass('active');
            }
            if (tabid == "tabD2") {
                $('.donate-tab li:nth-child(2)').toggleClass('active');
                $('.tab-content #tabD2').toggleClass('active');
            }
            if (tabid == "tabD3") {
                $('.donate-tab li:nth-child(3)').toggleClass('active');
                $('.tab-content #tabD3').toggleClass('active');
            }
            if (tabid == "tabD4") {
                $('.donate-tab li:nth-child(4)').toggleClass('active');
                $('.tab-content #tabD4').toggleClass('active');
            }
            if (tabid == "tabD5") {
                $('.donate-tab li:nth-child(5)').toggleClass('active');
                $('.tab-content #tabD5').toggleClass('active');
            }

        }