SOURCE

//首页tab切换	
	
$("#tabs li a").bind("click", function(){//可以更换切换效果，如“mouseover”
         $("#tabs li a").removeClass("on");
         $(this).addClass("on");  
		 var _index  =$(this).parent().index(); 
         $(".list_con").hide().eq(_index).show();
     });

<div class="demo_list">
    <ul class="tabs clearfix" id="tabs">
    	<li><a href="javascript:;" hidefocus="true" class="on">1</a></li>
        <li><a href="javascript:;" hidefocus="true">2</a></li>
        <li><a href="javascript:;" hidefocus="true">3</a></li>
    </ul>
    <ul class="list_con" style="display:block">
        <li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></li>
        <li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></li>
		<li><a>XXXXXXXXXX</a></li>
        <li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></li>
        <li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></li>
        <li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></li>
        <li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></li>
    </ul>

    <ul class="list_con" style="display:none">
		<li><a>XXXXXXXXXX</a></li>
        <li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></li>
        <li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></li>
        <li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></li>
        <li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></li>
        <li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></li>
        <li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></li>
    </ul>
    <ul class="list_con" style="display:none">
        <li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></li>
        <li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></li>
        <li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></li>
        <li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></li>
        <li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></li>
		<li><a>XXXXXXXXXX</a></li>
        <li><a>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</a></li>
    </ul>
</div>

/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px 宋体;  }
img{ border:0;  }
a{ text-decoration:none; color:#333;  }
a:hover{ color:#1974A1;  }
/*首頁列表*/
.demo_list{ margin: 0 auto}
.demo_list,.list{ width:500px; height:300px; border:1px solid #d8d8d8; position:relative; font-family:"Microsoft YaHei"; overflow:hidden;}
.demo_list .more{ position:absolute; right:10px;top:6px; color:#a6a6a6; font-size:14px;}
.demo_list .tabs,.list .tabs{ width:500px; height:30px;border-bottom:1px solid #dadada; background-color:#f1f1f2;}
.demo_list .tabs li,.list .tabs li{width:123px; height:31px; line-height:30px; float:left; position:relative;top:1px; margin-top:-1px;}
.demo_list .tabs a,.list .tabs a{ width:122px; height:30px; line-height:30px; display:block; border:1px solid #dadada; border-top:none;border-left:none;background-color:#f1f1f2; text-align:center; color:#313131; font-weight:normal; font-size:14px;}
.demo_list .tabs a:hover,.list .tabs a:hover{ text-decoration:none;}
.demo_list .tabs a.on,.list .tabs a.on{border-bottom:1px solid #FFF;border-right:1px solid #dadada; border-top:none;border-left:none;background-color:#FFF;}
.list_con{ height:366px; overflow:hidden;}
.list_con li,.list_s li{ font-size:14px; line-height:33px; margin:0 20px; border-bottom:1px dashed #dedede;}
.list_con li a,.list_s li a{ width:458px; height:33px; line-height:33px; color:#001732; display:inline-block; vertical-align:middle; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; word-break:break-all;}
.list_con li em,.list_s li em{ display:inline-block; vertical-align:middle;}
.list_con li span,.list_s li span{ float:right; color:#a3a3a3;}
.list_con li.hotest{ font-size:18px; font-weight:normal; text-align:center; line-height:50px;}
.list_con li.hotest a{ color:#e74c00;}