Question

I found this post

http://www.netmagazine.com/tutorials/create-jquery-tab-system

And modified this tabs to fit my current design. The only thing I need is to make this tabs plug-in work with hashtags. For example, if user opened mydomain.com/#firstTab open this tab.

My code looks like that

var url, tabToken;
$(function() {

    var indicator = $('#indicator'),
    indicatorHalfWidth = indicator.width()/2,
    lis = $('#tabs').children('li');

    $("#tabs").tabs("#content section", {
        effect: 'fade',
        fadeOutSpeed: 0,
        fadeInSpeed: 400,
        onBeforeClick: function(event, index) {
            var li = lis.eq(index),
            newPos = li.position().left + (li.width()/2) - indicatorHalfWidth;
            indicator.stop(true).animate({
                left: newPos
            }, 600, 'easeInOutExpo');
        }
    }); 

});

$(document).ready(function() {
    url = document.location.href;
    tabToken=url_data = url.split('#')[1];
    if(tabToken){
         What to do???
    }
});

Please take a look at the link that I posted, and check if I can make it work with hashtags? I don’t want to change this plug-in, because I will not find any plugin with similar design.

Answer 1

It looks like the tutorial you are referring to is using jQuery tools tab system,

It already have history options along with backbutton support

Check http://jquerytools.org/demos/tabs/history.html#tab3

$(function() {
  $(".css-tabs:first").tabs(".css-panes:first > div", { history: true });
});

http://jquerytools.org/demos/tabs/history.html#tab1

http://jquerytools.org/demos/tabs/history.html#tab2

http://jquerytools.org/demos/tabs/history.html#tab3

Also Check this for internal linking

http://jquerytools.org/demos/tabs/anchors.html