Tengo un contenido de pestañas típico y realmente necesito ayuda. Me gustaría lograr que, cuando el usuario intenta acceder a una pestaña específica a través de un enlace de anclaje externo (http: //www.url.com#content2), el enlace de navegación se activa y se muestra la pestaña correcta.

Gracias por tu ayuda.

HTML

<nav class="inner-nav">
    <ul>
        <li><a href="#content1">Inner nav navigation link1</a></li>
        <li><a href="#content2">Inner nav navigation link2</a></li>
        <li><a href="#content3">Inner nav navigation link3</a></li>
    </ul>
</nav>

<section class="tab-content" id="content1">
    <article>
        content1 goes here
    </article>
</section>

<section class="tab-content" id="content2">
    <article>
        content2 goes here
    </article>
</section>

<section class="tab-content" id="content3">
    <article>
        content3 goes here
    </article>
</section>

JAVASCRIPT

$(document).ready(function () {
        $(".tab-content").hide();
    $(".tab-content:first").show();
    $(".inner-nav li:first").addClass("active");

    $(".inner-nav a").click(function(){
        $(".inner-nav li").removeClass("active");
        $(this).parent().addClass("active");
        var currentTab = $(this).attr("href");
        $(".tab-content").hide();
        $(currentTab).show();
        return false;
    });
});

Tengo un ejemplo vivoaquí Por lo tanto, si hace clic en la navegación, todo funciona bien, pero si quiere ir a una pestaña específica kajag.com/themes/book_your_travel/location.html#sports_and_nature, la pestaña correcta no se abre.