选项卡特效

js代码：
function g(o) { return document.getElementById(o); }
        function HoverLi(n,start,num,css_num) {
            //如果有N个标签,就将i<=N;
            for (var i = start; i <start+num; i++) { g('tb_' + i).className = 'normaltab'+css_num; g('tbc_0' + i).className = 'undis'; } g('tbc_0' + n).className = 'dis'; g('tb_' + n).className = 'hovertab'+css_num;
        }
CSS代码：
{
    line-height:28px;
    border-top:1px solid #ddd;
     border-left:1px solid #ddd;
      border-right:1px solid #ddd;
    margin-top:8px;
    height:275px;
 
}
.new_d .new_ .tb_
{
    border-bottom:1px solid #ddd;
    font-size:12px;
    height:28px;
    background:url(/images/li_bg1.jpg) repeat-x ;
    color:#333;
   
}

.new_d .new_ .tb_ .hovertab
{
    font-weight:bold;
    border-bottom:1px solid #fff;
}
.new_d .new_ ul
{
    list-style-type:none;
      padding-left:5px;
   
}
.ctt{height:auto;padding:0 6px; padding-top:10px; text-align:left; position:relative;}
.ctt .more{position:absolute; right:10px; top:-22px;}
 .ctt .more a{color:#058ad2;}
.w936{width:467px; overflow:hidden;/*这里调整整个滑动门的宽度*/}
/* TAB 切换效果 */
.tb_ ul{height:28px;}
 .tb_ li{float:left; height:28px; line-height:28px; width:80px; margin-right:4px; cursor:pointer; text-align:center; list-style:none; }
/* 用于控制显示与隐藏的css类 */
.normaltab0{background:url(/images/2.png) repeat-x bottom;}
 .hovertab0{background:url(/images/li_bg.jpg) no-repeat bottom;}
.dis{display:block;}
.undis{display:none;}

HTML代码：
<div class="new_1 new_d">
        <div class="new_">
            <div id="tb_" class="tb_">
                <ul>
                    <li id="tb_1" class="hovertab0" onmouseover="HoverLi(1,1,2,0);">选项卡1</li>
                    <li id="tb_2" class="normaltab0" onmouseover="HoverLi(2,1,2,0);">选项卡2</li>
                </ul>
            </div>
            <div class="ctt">
                <div class="dis" id="tbc_01">
                    <div class="in-news">
                        <ul>
                            <li><a href="http://blog.163.com/chen_hui/blog/">啊撒大声地</a></li>
                            <li><a href="http://blog.163.com/chen_hui/blog/">啊撒大声地</a></li>
                            <li><a href="http://blog.163.com/chen_hui/blog/">啊撒大声地</a></li>
                            <li><a href="http://blog.163.com/chen_hui/blog/">啊撒大声地</a></li>
                            <li><a href="http://blog.163.com/chen_hui/blog/">啊撒大声地</a></li>
                        </ul>
                    </div>
                </div>
                <div class="undis" id="tbc_02">
                    <div class="in-news">
                        <ul>
                            <li><a href="http://blog.163.com/chen_hui/blog/">啊撒大声地</a></li>
                            <li><a href="http://blog.163.com/chen_hui/blog/">啊撒大声地</a></li>
                            <li><a href="http://blog.163.com/chen_hui/blog/">啊撒大声地</a></li>
                            <li><a href="http://blog.163.com/chen_hui/blog/">啊撒大声地</a></li>
                            <li><a href="http://blog.163.com/chen_hui/blog/">啊撒大声地</a></li>
                            <li><a href="http://blog.163.com/chen_hui/blog/">啊撒大声地</a></li>
                            <li><a href="http://blog.163.com/chen_hui/blog/">啊撒大声地</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>