Result
http://jsfiddle.net/kachibito/fm7HN/embedded/result,js,css,html
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>