Result
http://jsfiddle.net/dyMEy/5/embedded/result,js,css,html
jQuery
$(document).ready(function() { //最初に表示するコンテンツ $('.area:first').show(); //class="active"を追加 $('.tab li:first').addClass('active'); //クリックイベント $('.tab li').click(function() { $('.tab li').removeClass('active'); $(this).addClass('active'); $('.area').hide(); $($(this).find('a').attr('href')).fadeIn(); return false; }); });
css
.tab, .tab li, .tab li a { float: left; padding:3px; margin-right:2px; } .content { clear: both; overflow: hidden; width: 300px; border:1px solid #eee; height:300px; } .area { display: none; } .tab li.active { background: #eee; } .tab li.active a{ color:red; }
html
<ul class="tab"> <li><a href="#tab1">tab1</a></li> <li><a href="#tab2">tab2</a></li> <li><a href="#tab3">tab3</a></li> <li><a href="#tab4">tab4</a></li> </ul> <div class="content"> <div class="area" id="tab1"> Tab1<br />Tab1<br />Tab1<br />Tab1<br /> </div> <div class="area" id="tab2"> Tab2<br />Tab2<br />Tab2<br />Tab2<br /> </div> <div class="area" id="tab3"> Tab3<br />Tab3<br />Tab3<br />Tab3<br /> </div> <div class="area" id="tab4"> Tab4<br />Tab4<br />Tab4<br />Tab4<br /> </div> </div>