Вкладки, или табы, позволяют логически группировать контент
Html код
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> <div id="info"> <p id="intro"> Welcome to <strong>StarTrackr!</strong> the planet's premier … </p> <p id="about"> StarTrackr! was founded in early 2009 when a young … </p> <p id="disclaimer"> Disclaimer! This service is not intended for those … </p> </div> |
js-код
|
1 2 3 4 5 6 7 8 9 10 |
$('#info p:not(:first)').hide(); $('#info-nav li').click(function(event) { event.preventDefault(); $('#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'); |