javascript - I am trying to make clickable tabs using jQuery -
i trying make clickable tags using javascript when click on tabs disappears. suggestions?
html:
<div id="contentwrap" class="round"> <h1>about eclipse</h1> <div class="tabs"> <ul class="tabsnav cf"> <li><a href="#ct-who">who are</a></li> <li><a href="#ct-what">what do</a></li> <li><a href="#ct-how">how can join</a></li> </ul> <div class="tab" id="ct-who"> <p>eclipse fake javascript community website being provided design element students in wddbs sfwo course.</p><p>and yes, realize name of popular editor; js developers don't need that, because we're rockstar it. instead, name represents earned skill accomplish you.. eclipse competition.</p><p>ps - cake not lie.</p> </div> <div class="tab" id="ct-what"> <p>what undefinable, not because there no data type or testable typeof operator our work, because no words can describe awesomeness of javascript coding joy once you've reached enlightenment. learn revel in beauty of language, , great power shall bestowed upon you.</p> <p><img src="#" /></p> </div> <div class="tab" id="ct-how"> <p>you've joined our elite ranks. prove thee knoweth jquery.</p> </div> </div> </div> javascript:
$('#contentwrap p').hide().eq(0).show(); $('#contentwrap p:not(:first)').hide(); $('#contentwrap ul li').click(function(event) { event.preventdefault(); $('p').hide(); $('#contentwrap .current').removeclass("current"); $(this).addclass('current'); var clicked = $(this).find('a:first').attr('href'); $('#ct-how, #ct-what, #ct-who ' + clicked).fadein('400'); }).eq(0).addclass('current');
your fadein method wasn't selecting clicked element. hiding <p> elements , trying fade in containers. try this:
$('#contentwrap ul li').click(function(event) { event.preventdefault(); $('p').hide(); $('#contentwrap .current').removeclass("current"); $(this).addclass('current'); var clicked = $(this).find('a:first').attr('href'); $(clicked).find('p').fadein('400'); }).eq(0).addclass('current');
Comments
Post a Comment