送分~求一简单的JS TAB切换效果

感谢各位在百忙之中光临此地看我的问题，我的需求很简单，请看代码：
<div class="tabs">
<a href="" class="tab_a" title="tab_a"></a>
<a href="" class="tab_b" title="tab_b"></a>
</div>
<ul class="tab_a_content">
<li><a href="#" title="#">ARTICLE 1</a></li>
<li><a href="#" title="#">ARTICLE 2</a></li>
<li><a href="#" title="#">ARTICLE 3</a></li>
<li><a href="#" title="#">ARTICLE 4</a></li>
<li><a href="#" title="#">ARTICLE 5</a></li>
<li><a href="#" title="#">ARTICLE 6</a></li>
</ul>
<ul class="tab_b_content">
<li><a href="#" title="#">ARTICLE a</a></li>
<li><a href="#" title="#">ARTICLE b</a></li>
<li><a href="#" title="#">ARTICLE c</a></li>
<li><a href="#" title="#">ARTICLE d</a></li>
<li><a href="#" title="#">ARTICLE e</a></li>
<li><a href="#" title="#">ARTICLE f</a></li>
</ul>
CSS代码就先不贴了，如上述代码中的div.tabs中，a.tab_a和a.tab_b通过CSS定义了背景图片和大小等，是可激活的链接我想要的效果是，默认状态下，仅显示ul.tab_a_content中的内容；当鼠标移到div.tabs中的a.tab_b上时（a:hover），
    ul.tab_a_content所占的区域切换显示成ul.tab_b_content中的内容
        （ul.tab_a_content设置为display:none;同时ul.tab_b_content设置为display:block;）当鼠标再移到div.tabs中的a.tab_a上时（a:hover），
    该区域显示ul.tab_a_content中的内容。如此实现切换效果，不知道哪位大侠可以帮我将JS代码写出来，我相信对各位大侠来说，这实在是太容易了。如果能有一点过渡效果的话就更好了。谢谢各位大侠，在线等待答案

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
window.onload=function(){
$(".tab_a_content").show();
$(".tab_b_content").hide();
$(".tab_a").hover(function(){
$(".tab_a_content").show();
$(".tab_b_content").hide();
});
$(".tab_b").hover(function(){
$(".tab_b_content").show();
$(".tab_a_content").hide();
});
}
</script>
<div class="tabs">
    <a href="" class="tab_a" title="tab_a">aaaaaaaaaaa</a>
    <a href="" class="tab_b" title="tab_b">bbbbbbbbbbb</a>
</div>
<ul class="tab_a_content">
    <li><a href="#" title="#">ARTICLE 1</a></li>
    <li><a href="#" title="#">ARTICLE 2</a></li>
    <li><a href="#" title="#">ARTICLE 3</a></li>
    <li><a href="#" title="#">ARTICLE 4</a></li>
    <li><a href="#" title="#">ARTICLE 5</a></li>
    <li><a href="#" title="#">ARTICLE 6</a></li>
</ul>
<ul class="tab_b_content">
    <li><a href="#" title="#">ARTICLE a</a></li>
    <li><a href="#" title="#">ARTICLE b</a></li>
    <li><a href="#" title="#">ARTICLE c</a></li>
    <li><a href="#" title="#">ARTICLE d</a></li>
    <li><a href="#" title="#">ARTICLE e</a></li>
    <li><a href="#" title="#">ARTICLE f</a></li>
</ul>
0.00% 很快？
最好HTML是这样的：
<div id='tabTitle'>
    <a></a>
    <a></a>
</div>
<div id='tabCont'>
    <ul></ul>
    <ul></ul>
</div>
好控制，不用写一大堆找元素的代码。
function tabView(tID, cID, n){
    var _t = document.getElementById(tID).getElementsByTagName('a');
    var _c = document.getElementById(cID).getElementsByTagName('ul');
    for(var i = 0; i < _t.length; i++){
        _t[i].className = (i == n)? 'tab_a' : 'tab_b';  //分别表示显示/隐藏时的样式
        _c[i].className = (i == n)? 'tab_a_content' : 'tab_b_content';  //同上
    }
}//调用：<a onmouseover='tabView('tabTitle', 'tabCont', 1)'></a>
<a onmouseover='tabView('tabTitle', 'tabCont', 2)'></a>
不好意思，错了！//调用：<a onmouseover='tabView('tabTitle', 'tabCont', 0)'></a>
<a onmouseover='tabView('tabTitle', 'tabCont', 1)'></a>
tab_a 和 tab_a_content是指内容显示时的样式看下面的CSS
tab_a{background:#f00;color:#fff;}
tab_a_content{display:block;}
tab_b{background:#aaa; color:#000;}
tab_b_content{display:none;}
被搞崩溃了，大侠，确定这些代码可以吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OH NO</title>
</head><style>
.tab_a {background:#f00;color:#fff;}
.tab_a_content {display:block;}
.tab_b {background:#aaa; color:#000;}
.tab_b_content {display:none; }</style><body><script type="text/javascript">function tabView(tID, cID, n){
    var _t = document.getElementById(tID).getElementsByTagName('a');
    var _c = document.getElementById(cID).getElementsByTagName('ul');
    for(var i = 0; i < _t.length; i++){
        _t[i].className = (i == n)? 'tab_a' : 'tab_b';  //分别表示显示/隐藏时的样式
        _c[i].className = (i == n)? 'tab_a_content' : 'tab_b_content';  //同上
    }
}
</script><div id='tabTitle'>
<a onmouseover='tabView('tabTitle', 'tabCont', 0)' class="tab_a" href="">aaa</a>
<a onmouseover='tabView('tabTitle', 'tabCont', 1)' class="tab_b" href="">bbb</a>
</div>
<div id='tabCont'>
<ul class='tab_a_content'>
<li><a href="#" title="#">ARTICLE 1</a></li>
<li><a href="#" title="#">ARTICLE 2</a></li>
<li><a href="#" title="#">ARTICLE 3</a></li>
<li><a href="#" title="#">ARTICLE 4</a></li>
<li><a href="#" title="#">ARTICLE 5</a></li>
<li><a href="#" title="#">ARTICLE 6</a></li>
</ul>
<ul class='tab_b_content'>
<li><a href="#" title="#">ARTICLE a</a></li>
<li><a href="#" title="#">ARTICLE b</a></li>
<li><a href="#" title="#">ARTICLE c</a></li>
<li><a href="#" title="#">ARTICLE d</a></li>
<li><a href="#" title="#">ARTICLE e</a></li>
<li><a href="#" title="#">ARTICLE f</a></li>
</ul>
</div>
</body>
</html>
<div id='tabTitle'>
    <a onmouseover="tabView('tabTitle', 'tabCont', 0)" class="tab_a" href="">aaa</a>
    <a onmouseover="tabView('tabTitle', 'tabCont', 1)" class="tab_b" href="">bbb</a>
</div>' --> "