[laimas]

Однако не переключает на заголовок таба #tab2

НУ так верстка та еще, все как в басне о щуке, раке, ... Определитесь с контейнерами, которые, и только они, будут скрываться, а уже в них помещайте все что хочется, и которым управлять не надо.

<style>
li {
    list-style: none;
    display: inline-block;
}

.tab-content:not(#tab1) {
    display: none;
} 
</style>

<div>

    <div>
        <ul>
            <li class="current"><a href="#tab1">таб1</a></li>
            <li><a href="#tab2">таб2</a></li>
            <li><a href="#tab3">таб3</a></li>                
        </ul>
    </div>

    <div class="tab-content" id="tab1">
        <h4>таб1</h4>
        Содержание вкладки 1
    </div>

    <div class="tab-content" id="tab2">
        <h4>таб2</h4>
        Содержание вкладки 2
    </div>

    <div class="tab-content" id="tab3">
        <h4>таб3</h4>
        Содержание вкладки 3
    </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('ul').on('click', 'a', function(e) {
    e.preventDefault();
    var active = $(this).parent().siblings('.current').removeClass('current').children().attr('href'),
        current = $(this).parent().addClass('current').end().attr('href');
    
    $(active).hide();
    $(current).show()
});
</script>