Misc refactoring.

- Switched to `hashchange` listening instead of delegation
  We still check that the given hash exists as a `href` within a valid
  Skeleton tabs markup, but you can now send links around that focus
  on tabs.

  As an example, if I tweet out mypage.com/#activetab, it will check that
  `#activetab` is a valid href in an anchor within an `<ul class="tabs">`
  element, and if so, make that tab active.

- In addition, you can have multiple anchors in the page that
  trigger tabs by simply setting the appropriate `href`.

- Leverage `closest` and `find` instead of `parent`, `siblings` and
  `children` (code simplification).
This commit is contained in:
Guillermo Rauch 2012-03-01 19:38:50 -03:00
parent 4c7d6b0b3e
commit 110765dbc1

View File

@ -9,20 +9,20 @@
*/ */
jQuery(function ($) { jQuery(function ($) {
$('body').on('click', 'ul.tabs > li > a', function(e) { // hash change handler
//Get Location of tab's content function hashchange () {
var contentLocation = $(this).attr('href'); var hash = window.location.hash
, el = $('ul.tabs [href*="' + hash + '"]')
//Let go if not a hashed one if (el.length) {
if(contentLocation.charAt(0)=="#") { $(el).closest('.tabs').find('.active').removeClass('active');
e.preventDefault(); $(el).addClass('active');
//Make Tab Active $(hash).show().addClass('active').siblings().hide().removeClass('active');
$(this).parent().siblings().children('a').removeClass('active');
$(this).addClass('active');
//Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
} }
}); }
// listen on event and fire right away
$(window).on('hashchange.skeleton', hashchange);
hashchange();
}); });