JQuery: Novice to Ninja- P13:No matter what kind of ninja you are—a cooking ninja, a corporate lawyer ninja, or an actual ninja ninja—virtuosity lies in first mastering the basic tools of the trade. Once conquered, it’s then up to the full-fledged ninja to apply that knowledge in creative and inventive ways. | Menus Tabs Tooltips and Panels 157 p id about StarTrackr was founded in early 2009 when a young . p p id disclaimer Disclaimer This service is not intended for the those . p div Next we need to create our tab navigation bar. As with so many controls and effects it s the overall illusion that s important. An unordered list of links will do nicely but we ll style them to look tab-like chapter_05 11_simple_tabs excerpt ul id info-nav li a href intro Intro a li li a href about About Us a li li a href disclaimer Disclaimer a li ul We ve styled the links with CSS to have a tab-like appearance but there are dozens of different ways of accomplishing this so use whatever you re familiar with or what seems most sensible. We ve opted for extremely basic styles since what we want to focus on is the functionality. The first task we ll do after our document s ready is hide all of the tabs except the first one this will be our default tab. We could do this by hiding all the panes and then showing the first one like this info p .hide .eq 0 .show But this makes jQuery do more work than is necessary we want to avoid hiding a tab only to show it again straight away. Instead we can be more specific with our selector we can combine filters to select everything except the first element chapter_05 11_simple_tabs excerpt info p not first .hide 158 jQuery Novice to Ninja The important point is that once the page loads only one tab content pane is displayed to the user. The code to switch tabs is straightforward and quite similar to the other hide show controls we ve built so far chapter_05 11_simple_tabs excerpt info-nav li .click function e info p .hide info-nav .current .removeClass current this .addClass current var clicked this .find a first .attr href info clicked .fadeIn fast .eq 0 .addClass current There s one peculiar aspect worth pointing out to select the content pane corresponding to the clicked link we re joining the href .
