Переключение таба при клике на ссылку. Как сделать?

Question

[Eugene_Koi]

Привет, есть группа ссылок. Необходимо сделать так, чтобы при клике на ссылку запускалась функция

$.ionTabs.setTab("Tabs_Group_name", "Tab_1_name");
(Она открывает определенный таб). Только вместо Tab_1_name должно быть Tab_(здесь указан номер порядковый номер ссылки по которой кликнули)_name. Тоесть если кликают по первой ссылке, открывается первый таб, по второй-второй и тд. Представление как оно работать должно есть, но вот с решением проблемы возникли, надеюсь на вашу помощь.
Код самих ссылок

<div class="dropdown-content">
    <ul>
       <li><a href="leistungen.html#tab1">Beratung</a></li>
       <li><a href="leistungen.html#tab2">Jahresabschluss</a></li>
       <li><a href="leistungen.html#tab3">Finanzbuchhaltung</a></li>
       <li><a href="leistungen.html#tab4">Lohn- und Gehaltsbuchführung</a></li>
       <li><a href="leistungen.html#tab5">Steuererklärungen</a></li>
   </ul>

P.S.
В общем в чем проблема сама то. На каждой странице сайта есть всплывающий при наведении блок, в котором содержаться эти ссылки. При клике на ссылку открыватся страница с табами и определенный таб, на который ведет эта ссылка. Так вот в хеше я записал значения и потом в зависимости от них открывал определенный таб. Но проблема в том, что если использовать эти ссылки уже на открытой странице с табами, то табы не переключаются так как не происходит перезагрузка страницы. Поэтому и нужно прибегнуть к такому решению.

Answer 1

[KazeZlat]

Если ваша ссылка ведет на ту же страницу, можно просто <a href="#tab1">

$('a[href^="#tab"]').click(function(){
    $.ionTabs.setTab("Tabs_Group_name", "Tab_" + $(this).attr("href").replace('#tab', '') + "_name");
});

Но вообще, если без анимации ваши табы работают, то почему бы не наложить их друг на друга и не добавить немного CSS-магии?

<div class="content">
    <div id="tab1">Beratung</div>
    <div id="tab2">Jahresabschluss</div>
    <div id="tab3">Finanzbuchhaltung</div>
    <div id="tab4">Lohn- und Gehaltsbuchführung</div>
    <div id="tab5">Steuererklärungen</div>
</div>

.content {
    position: relative;
}
.content > div {
    position: absolute;
    display: none;
    background: #eee;
    width: 100%;
}
.content > div:first-child,
.content > div:target {
    display: block;
}

Можно и анимацию добавить, если добавить transition и вместо display оперировать width или opacity