0

With the help of a friendly guy I've built a tab script that is very simple and doesn't require an additional script like jQuery UI.

Now, I've seen the address bar thing which is really cool so you actually have ACCESS to the tabs, be able to bookmark the tabs and use browsers back/forth buttons.

http://www.asual.com/jquery/address/

here is my JS fiddle: http://jsfiddle.net/BiBA/WEEFd/

I tried to add it into my existing JS snippet but it didnt' work. Do you know how to add the address support into this tab script? $(document).ready(function(){ initTabs(); });

function initTabs() {
  $('#tabMenu a').bind('click',function(e) {
  e.preventDefault();
  var thref = $(this).attr("href").replace(/#/, '');
  $('#tabMenu a').removeClass('active');
  $(this).addClass('active');
  $('#tabContent div.content').removeClass('active');
  $('#'+thref).addClass('active');
  });
}
Matt
  • 22,721
  • 17
  • 71
  • 112
BiBA
  • 1

1 Answers1

0

Use location.hash to retrieve the hash value of your url. You can pass this value to your initTabs function and check if there's a content/tab with the corresponding id/href value and activate it.

See also http://www.ezineasp.net/post/Javascript-Location-Hash-with-Example.aspx

T. Junghans
  • 11,385
  • 7
  • 52
  • 75
  • thanks for the answer, this is a neat feature but can you tell me how to use the jQuery address plugin lsted in the OP to use in combination with my code snippet? – BiBA Aug 18 '11 at 11:07
  • Check out http://www.asual.com/jquery/address/docs/#sample-usage. The very first example should help. $.address.change checks to see if the hash value in the url changes and $.address.value sets the hash value. Call $.address.value when switching tabs or when initializing your tabs. – T. Junghans Aug 18 '11 at 11:17