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:
parent
4c7d6b0b3e
commit
110765dbc1
@ -9,20 +9,20 @@
|
||||
*/
|
||||
|
||||
jQuery(function ($) {
|
||||
$('body').on('click', 'ul.tabs > li > a', function(e) {
|
||||
//Get Location of tab's content
|
||||
var contentLocation = $(this).attr('href');
|
||||
// hash change handler
|
||||
function hashchange () {
|
||||
var hash = window.location.hash
|
||||
, el = $('ul.tabs [href*="' + hash + '"]')
|
||||
|
||||
//Let go if not a hashed one
|
||||
if(contentLocation.charAt(0)=="#") {
|
||||
e.preventDefault();
|
||||
if (el.length) {
|
||||
$(el).closest('.tabs').find('.active').removeClass('active');
|
||||
$(el).addClass('active');
|
||||
|
||||
//Make Tab 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');
|
||||
$(hash).show().addClass('active').siblings().hide().removeClass('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// listen on event and fire right away
|
||||
$(window).on('hashchange.skeleton', hashchange);
|
||||
hashchange();
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user