How to make these Jquery tabs linkable through ahref?

Question

I've been trying to fix this all day - so rest assured that I've come here after exhausting all of my limited capabilities. I'm no programmer by any means, but I have attempted..

I'm running WordPress and using a theme which has custom tabs.

I want to be able to link to the tabs using ahref code. E.g. www.test.com/page/#tab2 and have it open the second tab.

Here's the HTML code:

 <div class="short-tabs">
 <ul style="border-bottom: 1px solid #dbd6d6;">
<li><a href="">Best Food Processors</a></li>
<li><a href="">Buying Guide</a></li>
 </ul>
 <div style="border: none;">
 this is tab1
 </div>
 <div style="border: none;">
 this is tab2
 </div>
 </div>

Here's the JQUERY code that corresponds to it:

    // Tabbed blocks
    jQuery(".short-tabs").each(function () {
        var thisel = jQuery(this);
        thisel.children("div").eq(0).addClass("active");
        thisel.children("ul").children("li").eq(0).addClass("active");
    });

    jQuery(".short-tabs > ul > li a").click(function () {
        var thisel = jQuery(this).parent();
        thisel.siblings(".active").removeClass("active");
        thisel.addClass("active");
        thisel.parent().siblings("div.active").removeClass("active");
        thisel.parent().siblings("div").eq(thisel.index()).addClass("active");
        return false;
    });

I have no idea how to edit this to allow for linking to and from the tabs. As you can see from the HTML, I don't even need to link to #tab1 for example for them to work.

Any ideas or experts who can help? :)

JSFIDDLE Link: http://jsfiddle.net/cws1j0q7/2/

Answer 1

You can check the URL hash using window.location.hash

The easiest way for example to integrate this into your code is to add the href to your links

<ul style="border-bottom: 1px solid #dbd6d6;">
     <li>
        <a href="#tab1">Best Food Processors</a>
     </li>
     <li>
        <a href="#tab2">Buying Guide</a>
     </li>
</ul>

check if the URL has a hash and trigger the click

if(window.location.hash){
    $('a[href=' + window.location.hash + ']').trigger('click');
}

You can also set a data-* attribute or an ID and check for that. Make sure you disable auto-scrolling if you choose to set an ID.

Answer 2

The key here is window.location.hash

jQuery(".short-tabs").each(function () {
    var thisel = jQuery(this);
    thisel.children("div").eq(0).addClass("active");
    thisel.children("ul").children("li").eq(0).addClass("active");
});

jQuery(".short-tabs > ul > li a").click(function () {
    selectTab(this);
    return false;
});

jQuery("a").click(function () {
    processHash( '#' + jQuery(this).prop('href').split("#")[1] );
});

function selectTab($a) {
    var $li = jQuery($a).parent();
    $li.siblings(".active").removeClass("active");
    $li.addClass("active");
    $li.parent().siblings("div.active").removeClass("active");
    $li.parent().siblings("div").eq($li.index()).addClass("active");
}

function processHash(hash) {
    var $a = jQuery('.short-tabs a[href="' + hash + '"]');
    selectTab( $a );
}

if ( window.location.hash ) {
    processHash();
}

http://jsfiddle.net/cws1j0q7/7/