横並びのタブメニュー
Result
jQuery
$(document).ready(function() {
$('#con>li:gt(0)').hide();
$('#nav li:first').addClass('active');
$('#tabs #nav li').bind('click', function() {
$('li.active').removeClass('active');
$(this).addClass('active');
var target = $('a', this).attr('href');
$(target).slideDown(400).siblings().slideUp(300);
return false;
});
});
css
#nav{
float: left;
width: 100px;
}
#nav li{background: #ccc;}
#nav li:hover,
#con li ul li a:hover{background: #eee;}
#nav li.active{
color:#f7f7f7;
background: #eee;
}
ul#nav li.active a{color: #303030;}
ul#nav li a{
padding: 5px 5px;
margin: 0 0 3px 0;
display: block;
width: 100px;
text-decoration: none;
color: #7e7e7e;
font: 11px/20px Georgia;
}
ul#nav a:hover{color: #0a0a0a}
ul#con{
margin: 15px 0 0;
background: #fff;
min-height: 180px;
width: 350px;
float: left;
padding: 0 10px;
}
#con>li{
width: 350px;
list-style: none;
padding: 0 10px 10px 0;
}
#con li ul li a{
display: block;
border-bottom: 1px solid #e7e7e7;
padding: 5px 0;
text-decoration: none;
}
html
<div id="tabs">
<ul id="nav">
<li><a href="#list-a">list-a</a></li>
<li><a href="#list-b">list-b</a></li>
<li><a href="#list-c">list-c</a></li>
</ul>
<ul id="con">
<li id="list-a">content</li>
<li id="list-b">content</li>
<li id="list-c">content</li>
</ul>
</div>
via
Tabbed Content using jQuery