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.
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