HTML and CSS Reference
In-Depth Information
You would notice that the active tab navigation item still seems to suggest it is Day
1 ! Let us fix that by changing our code to do something similar with the tabbed nav-
igation anchors, as shown in the following code snippet:
var $navlinks = $('#lineup .js-tabitem');
var $tabs = $('.t-tab__body');
var hiddenClass = 'hidden';
var activeClass = 't-tab__navitem--active';
var $lastactivetab = null;
var $lastactivenav = null;
$navlinks.click(function() {
var $this = $(this);
//take note of what was the immediately
previous tab and tab nav that was active
$lastactivetab = $lastactivetab ||
$tabs.not('.' + hiddenClass);
$lastactivenav = $lastactivenav ||
$navlinks.filter('.' + activeClass);
// our code for showing or hiding the current
day's line up
$lastactivetab.addClass(hiddenClass);
$(this.hash).removeClass(hiddenClass);
$lastactivetab = $(this.hash);
// change active navigation item
$lastactivenav.removeClass(activeClass);
$this.addClass(activeClass);
$lastactivenav = $this;
return false;
});
Search WWH ::




Custom Search