实用：滑动门tag切换

css:

 1 *{ margin:0; padding:0; list-style:none; font-size:12px;}
 2 a{ text-decoration:none; color:#333;}
 3 #wrap{ position:relative; width:330px; height:220px; margin:20px auto;}
 4 #wrap .title{ position:relative; width:100%; overflow:hidden;}
 5 .title li{ display:block; float:left; padding:0 0 0 5px; margin:0 5px 0 0; background:url(img/tag_left.gif) left 0 no-repeat;}
 6 .title li a{ display:block; padding:6px 15px 3px 10px; background:url(img/tag_right.gif) right 0 no-repeat; text-align:center; }
 7 .title li.now{ background-position:0 -23px;}
 8 .title li.now a{ background-position:right -23px; font-weight:700;}
 9 .cont{ margin:-1px 0 0; width:308px; padding:10px; border:1px solid #d0d0d0; overflow:hidden; z-index:-100;}
10 .cont li{ margin:0 0 5px 0;}

 

xhtml:

 1 <div id="wrap">
 2     <ul class="title" id="Tag_title">
 3         <li id="on1" class="now"><a href="javascript:void(0)" onclick="javascript:wrapTag(1)">最新内容</a></li>
 4         <li id="on2"><a href="javascript:void(0)" onclick="javascript:wrapTag(2)">新鲜事</a></li>    
 5     </ul>
 6     <div class="cont" id="cont1">
 7         <ul>
 8             <li>·<a href="http://www.cnblogs.com/rere/" title="">CSS Templates 频道4月5日更新 增加模板22套</a></li>
 9             <li>·<a href="http://www.cnblogs.com/rere/" title="">XHTML与CSS入门经典 从零开始系列教程！</a></li>
10             <li>·<a href="http://www.cnblogs.com/rere/" title="">DIV+CSS布局入门示例（目录）</a></li>
11             <li>·<a href="http://www.cnblogs.com/rere/" title="">CSS基础教程17篇 [翻译Htmldog]</a></li>
12             <li>·<a href="http://www.cnblogs.com/rere/" title="">DIV CSS布局实例：用css网站布局之十步实录！</a></li>
13             <li>·<a href="http://www.cnblogs.com/rere/" title="">WEB2.0标准教程 循序渐进十二天的基础学习！</a></li>
14             <li>·<a href="http://www.cnblogs.com/rere/" title="">Div+CSS 网页布局 教程！</a></li>
15         </ul>
16     </div>
17     <div class="cont" id="cont2" style="display:none;">
18         <ul>
19             <li>·<a href="http://www.cnblogs.com/rere/" title="">XHTML与CSS入门经典 从零开始系列教程！</a></li>
20             <li>·<a href="http://www.cnblogs.com/rere/" title="">XHTML与CSS入门经典 从零开始系列教程！</a></li>
21             <li>·<a href="http://www.cnblogs.com/rere/" title="">DIV+CSS布局入门示例（目录）</a></li>
22             <li>·<a href="http://www.cnblogs.com/rere/" title="">CSS基础教程17篇 [翻译Htmldog]</a></li>
23             <li>·<a href="http://www.cnblogs.com/rere/" title="">DIV CSS布局实例：用css网站布局之十步实录！</a></li>
24             <li>·<a href="http://www.cnblogs.com/rere/" title="">WEB2.0标准教程 循序渐进十二天的基础学习！</a></li>
25             <li>·<a href="http://www.cnblogs.com/rere/" title="">Div+CSS 网页布局 教程！</a></li>
26         </ul>
27     </div>
28 </div>

 

js:

 1 <script type="text/javascript">
 2     function wrapTag(num)
 3     {
 4         for(var id = 1;id<=2;id++)
 5         {
 6             var Tag="cont"+id;
 7             var Css = "on" + id;
 8             if(id==num)
 9             {
10                 document.getElementById(Tag).style.display="block";
11                 document.getElementById(Css).className = "now";
12             }
13             else
14             {
15                 document.getElementById(Tag).style.display="none";
16                 document.getElementById(Css).className = "";
17             }
18         }
19     }
20 </script>

 

好了就这么多了，不想解释了，自己看吧，很简单~~哈哈

demo下载