css竖向tab
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery Tabs By Await http://leotheme.cn/</title><style>* { margin:0 auto; padding:0; font-family:"宋体",Arial, Helvetica, sans-serif; font-size:12px; }ul { list-style: none;}p {width: 450px; border:1px solid #88AAD6; padding: 5px 10px; text-align: right;}.tabbox{ position: relative; width:450px; height: 140px; margin:0 auto; border:1px solid #88AAD6; margin-top: 100px; padding: 10px;}.tabnavi { position: relative; left: 0; top: 0; z-index: 999; float: left;}.tabnavi li{ width:80px; height:24px; font-weight:bold; line-height: 24px; margin: 10px 0; border:1px solid #88AAD6; background:#eeeeff; color:#999; text-align:center;}.tabnavi li.current{ background:#fff; border-right: 1px solid #fff; color:#290052; }.tabContent{ position: relative; z-index: 99;float:left; margin-left: -1px; border:1px solid #88AAD6; padding:10px; width:347px; height:120px; }.clear {clear: both;}</style><script type="text/javascript" src="http://leotheme.cn/wp-includes/js/jquery/jquery.js"></script><script>$(function(){ $(".tabContent div:not(:first)").hide(); $(".tabnavi li").each(function(index){ $(this).click( function(){$(".tabnavi li.current").removeClass("current");$(this).addClass("current");$(".tabContent > div:visible").hide();$(".tabContent div:eq(" + index + ")").show();}) })})</script></head><body><div class="tabbox"><ul class="tabnavi"><li class="current">首页</li><li>关于</li><li>相册</li></ul><div class="tabContent"><div>http://leotheme.cn/</div><div>http://leotheme.cn/about</div><div>http://leotheme.cn/photo</div></div><div class="clear"></div></div><p>By Await 2009:06:11</p></body></html>
页:
[1]