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.
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 #
});
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+