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 ($) {
|
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();
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user