<div class="tabs" id="tabs-1" data-tab>
    <ul class="tab-nav" data-tab-nav>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
    </ul>

    <section class="tab-section" data-tab-section></section>
    <section class="tab-section" data-tab-section></section>
    <section class="tab-section" data-tab-section>

        <div class="tabs" id="tabs-2" data-tab>
            <ul class="tab-nav" data-tab-nav>
                <li><a href="">1</a></li>
                <li><a href="">2</a></li>
                <li><a href="">3</a></li>
            </ul>

            <section class="tab-section" data-tab-section></section>
            <section class="tab-section" data-tab-section></section>
            <section class="tab-section" data-tab-section></section>
        </div>

    </section>
</div>

$('#tabs-1').on('click', '[data-tab-nav] a', showSection); // Also being bound to #tabs-2 elements
$('#tabs-2').on('click', '[data-tab-nav] a', showSection);