Willin Wang

<div id="sidebar-tab">
	<div id="tab-title">
		<h4><span id="tab-1" class="current">相关日志</span><span id="tab-2">网络身价</span><span id="tab-3">随机友链</span></h4>
	</div>
	<div id="tab-content">
		<ul id="ctab-1">
< ?php   wp_related_posts(); }?>
        </ul>
		<ul id="ctab-2">
        <li><b>Online Earnings [Since Apr, 2010]</b></li>
     </ul>
		<ul id="ctab-3">
        < ?php wp_list_bookmarks('title_li=&categorize=0&orderby=rand&limit=10'); ?>
      </ul>
	</div>
</div>

#sidebar-tab{border:1px dashed #ccf;margin-bottom:1.5em;overflow:hidden;}
#sidebar-tab li{overflow:hidden;font-weight:bold;}
#tab-title .current{color:#356aa0;border-bottom:0px;padding:5px 14px;}
#tab-title h4{color:#666;font-size:15px;font-weight:bold;}
#tab-1,#tab-2,#tab-3{padding:5px 9px;border-bottom:1px dashed #ccf;cursor:pointer;width:33%;}
#tab-2{border:1px dashed #ccf;border-top:none;}
#ctab-2,#ctab-3{display:none;}
#tab-content ul{padding:5px 10px;overflow:hidden;list-style:none outside none;}
#tab-content ul li{padding-top:5px;height:20px;}

	// Slide Tab
	$('#tab-title span').mouseover(function(){ 
	$(this).addClass("current").siblings().removeClass(); 
	$("#c"+$(this).attr("id")).slideDown().siblings().slideUp(); 
});

<div id="msgbox-right">
<div id="msgtabup">
<div class="msgtab" id="msgtab-1">
<ul>
<li>Test1</li>
</ul>
</div>
<div class="msgtab" id="msgtab-2">
<ul>
<li>Test2</li>
</ul>
</div>
<div class="msgtab" id="msgtab-3">
<ul>
<li>Test3</li>
</ul>
</div></div>
<div id="msgtabdown"><span id="msgtabs-1">Tab1</span><span id="msgtabs-2">Tab2</span><span id="msgtabs-3">Tab3</span></div>
<div id="msgspan">Sth</div>
</div>

* {margin:0;padding:0;}
#msgbox-right{display:block;position:relative;width:70%;height:110px;overflow:hidden;}
.msgtab {height:100px;}
#msgtabup,#msgtabdown {margin:1px;width:95%;}
#msgtabdown {width:auto;position:absolute;float:right;right:50px;bottom: 20px;z-index:999;}
#msgtabdown span{margin:5px;}
#msgtabdown span.current{border:1px dashed #f06!important;color:#f06;}
.msgtab {clear:both;width:100%;border:1px dashed #ccf;display:none;}
#msgspan {height:20px;display:inline-block;position:absolute;z-index:999;right:50px; bottom:40px;}

$(document).ready(function(){
$('.msgtab:first').css('display','block');
autoroll();
hookThumb();
});
var i=0; 
var offset = 2500; 
var timer = null;
function autoroll(){
n = $('#msgtabdown span').length;
i++;
if(i > n){
i = 1;
}
slide(i);
timer = window.setTimeout(autoroll, offset);
}
function slide(i){
$('#msgtabdown span').removeClass('current');
$('#msgtabs-'+i).addClass('current');
$('.msgtab').stop(true,true).slideUp();
$('#msgtab-'+i).stop(true,true).slideDown();
 
}
function hookThumb(){
$('#msgtabdown span').hover(
function () {
if (timer) {
clearTimeout(timer);
i = $(this).prevAll().length+1;
slide(i);
}
},
function () {
 
timer = window.setTimeout(autoroll, offset);
this.blur();
return false;
}
);
}