Links do not redirect to Jquery Tabs

Question

I have 4 links as

<li><a class="open-tab" href="#sirkethesaptab">Şirket Hesabı</a></li>
<li><a class="open-tab" href="#musterihesaptab">Müşteri Hesabı</a></li>
<li><a class="open-tab" href="#odemetab">Ödemeler</a></li>
<li><a class="open-tab" href="#harcamatab">Harcamalar</a></li>
<li><a class="open-tab" href="#personeltab">Personel</a></li>

And i have a Jquery tab

<div class="col-sm-9 padding-right">
    <div id="tab-container2" class='tab-container'>
        <ul class='etabs'>
            <li class='tab'><a href="#sirkethesaptab">Şirket Hesabı</a></li>
            <li class='tab'><a href="#musterihesaptab">Müşteri Hesabı</a></li>
            <li class='tab'><a href="#odemetab">Ödemeler</a></li>
            <li class='tab'><a href="#harcamatab">Harcamalar</a></li>
            <li class='tab'><a href="#personeltab">Personel</a></li>
        </ul>
        <div class='panel-container'>
            <div id="sirkethesaptab">
                <h2>sirkethesaptab</h2>
            </div>
            <div id="musterihesaptab">
                <h2>musterihesaptab</h2>
            </div>
            <div id="odemetab">
                <h2>odemetab</h2>
            </div>
            <div id="harcamatab">
                <h2>harcamatab</h2>
            </div>
            <div id="personeltab">
                <h2>personeltab</h2>
            </div>
        </div>
    </div>
</div>

Jquery Codes

$('#tab-container2').tabs({
    active: $.cookie('activetab'),
    activate: function (event, ui) {
        $.cookie('activetab', ui.newTab.index(), {
            expires: 10
        });
    }
});

$('.open-tab').click(function (event) {
    var tab = $(this).attr('href');
    alert(tab);
    $('tab-container2').tabs('select', tab);
});

I want to redirect to necessary tab when i click to these external links above and when i click to any of these links, browser's adress bar changes but there is no redirection. How can fix this problem ? Any help would be appreciated.

Answer 1

I have prepared this plunker it seems it is working fine:

" http://plnkr.co/edit/I5HCJasIl7OVEci7cwvI "

Inside the plunkr I placed the last <div> at the bottom just to check if page navigates there and it is working fine.

Moreover you must use name attribute to an element inside div. Refer the link for the same " http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479511 "

Answer 2

So, it's a silly mistake I guess as you have a missing # in your selector within the .open-tab click function.

$('.open-tab').click(function (event) {
    var tab = $(this).attr('href');
    alert(tab);
    $('#tab-container2').tabs('select', tab); // <- added #
});

-Demo-

Note: The select option has been removed from jQuery UI v1.10+. You must use .tabs('active', <tabIndex>) if at all you plan to use 1.10+

-Demo- for 1.10+