jquery - tab content is not shown while clicking other tabs -
i new creating tabs.i following the turtorial in here http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
the problem tabs when click next tab, content gone
here html;
<div class="tabbed_area"> <ul class="tabs"> <li><a href="#" id="tab1" class="tab active">articles</a></li> <li><a href="#" id="tab2" class="tab">videos</a></li> <li><a href="#" id="tab3" class="tab">exclusive</a></li> </ul> <div id="content1" class="content" ><p>this tab 1</p></div> <div id="content2" class="content" ><p>this tab 2</p></div> <div id="content3" class="content" ><p>this tab 3</p></div> </div>
and jquery in here ;
$("a.tab").click(function () { // switch tabs off $(".active").removeclass("active"); // switch tab on $(this).addclass("active"); // slide elements class 'content' $(".content").slideup(); // figure out 'title' attribute value , find element id. slide down. var content_show = $(this).attr("title"); $("#"+content_show).slidedown(); });
can find problem ?
tutorial saying add title attribute list, otherwise javascript have nothing based in when changing tab. needs have identify div content want open.
<ul class="tabs"> <li><a href="#" title="content_1" class="tab active">topics</a></li> <li><a href="#" title="content_2" class="tab">archives</a></li> <li><a href="#" title="content_3" class="tab">pages</a></li> </ul>
Comments
Post a Comment