How to link to tabs with jtabs?

Question

I added tabs to a section of my page I am working on (stridertechnologies.com/stoutwebsite/products.php)using the steps found at this website: http://code-tricks.com/create-

Answer 1

This answer is from a duplicated question here: https://stackoverflow.com/a/20811416/3123649.

You could pass the tab div id in the url from the link and use that to select.

Home page links from index.html:

<a href="products.php?tabId=tile">tile</a>
<a href="products.php?tabId=metal">metal</a>

Add this javascript to the tab page

<script type="text/javascript">
// To get parameter from url
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

    $.extend($.expr[':'], {
    attrNameStart: function (el, i, props) {
        var hasAttribute = false;
        $.each(el.attributes, function (i, attr) {
            if (attr.name.indexOf(props[3]) !== -1) {
                hasAttribute = true;
                return false;
            }
        });


        return hasAttribute;
    }
});

// deselect tabs and select the tab by id
function focusTab(id) {
    $("#tile").hide().removeClass("active");
    $("#metal").hide().removeClass("active");
    $("#shingle").hide().removeClass("active");
    $("#flat").hide().removeClass("active");
    $("#custom").hide().removeClass("active");
    var toggle = $(id).parent().find("div");
    toggle.hide().removeClass("active");
    $('a:attrNameStart(data-toggle)').removeClass("active");
    var id1 = getParameterByName("tabId");
    var toggler = $('*[data-toggle=' + id1 + ']');        
    $(toggler).addClass("active");        
    $(id).show().addClass("active");
}

 $(function() {
    $(".tabs a").html5jTabs();

    // Get the tab id from the url
    var tabId = "#" + getParameterByName("tabId");
    // Focus the tab       
    focusTab(tabId);
});
</script>

EDIT: Replace the original focusTab function with the edit. Also add the extend function attrNameStart. This should deselect the default active tab. EDIT2: focusTab had a bug, it should work now

** I looked at your site and my solutions seems to be working for you. One thing I noticed. You initialize the html5jTabs() twice.

Remove the first call at the top

<script type="text/javascript">
    $(function() {
        $(".tabs a").html5jTabs();
    });
</script>

Answer 2

How about something like this? Basically we are taking the value of data-toggle in our buttons, and passing it into the selector for each tab content

JS

$('a[data-toggle]').on('click', function () {
    var dataToggle = $(this).data('toggle');

    $('.tabContent > div').removeClass('active');
    $('.tabContent > div#'+dataToggle+'').addClass('active');
});

working example: http://jsfiddle.net/whiteb0x/VdeqY/