CODEWITHSUNDEEP
javascriptjqueryhtml
Brocksley
Brocksley

Reputation: 15

How to link to tabs with jtabs?

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-a-simple-html5-tabs-using-jquery/

I want to link to the different tabs from the home page, but I am not sure how to do that outside of anchor names with html and that doesn't work with this, and there aren't any instructions on how to do it on the site.

It seems like there should be something really simple I can add to my javascript to detect which link they clicked on and make it the active tab.

javascript:

;(function($){
  $.fn.html5jTabs = function(options){
    return this.each(function(index, value){
      var obj = $(this),
      objFirst = obj.eq(index),
      objNotFirst = obj.not(objFirst);

      $("#" +  objNotFirst.attr("data-toggle")).hide();
      $(this).eq(index).addClass("active");

      obj.click(function(evt){

        toggler = "#" + obj.attr("data-toggle");
        togglerRest = $(toggler).parent().find("div");

        togglerRest.hide().removeClass("active");
        $(toggler).show().addClass("active");

        //toggle Active Class on tab buttons
        $(this).parent("div").find("a").removeClass("active");
        $(this).addClass("active");

        return false; //Stop event Bubbling and PreventDefault
      });
    });
  };
}(jQuery));

Upvotes: 0

Views: 363

Answers (2)

user3123649
user3123649

Reputation: 148

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>

Upvotes: 1

Jeff Voss
Jeff Voss

Reputation: 3695

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/

Upvotes: 1

Related Questions