网易Tab选项卡源码及下载

 

仿网易娱乐新闻Tab选项卡的html源码

Code
<div class="leftTitle">
<h2></h2>
<h3 id="ywhgnav1" class="on"><a href="javascript:showDiv('ywhg',1,3);" target="_self">最近新贴</a></h3>
<h3 id="ywhgnav2"><a href="javascript:showDiv('ywhg',2,3);" target="_self">热门菜谱</a></h3>
<h3 id="ywhgnav3"><a href="javascript:showDiv('ywhg',3,3);" target="_self">热点评论</a></h3>
<span><a href="http://www.izhufan.cn/showtopic-25.aspx">煮饭专题</a></span>
<div class="clear"></div>
</div>
<div class="leftList99" id="ywhg1" style="display: block;">
<ul>

                      <li>
             <span>[ 
                    <a href="showforum-12.aspx" target="_blank">家常菜</a>
                ]</span>&nbsp;&nbsp;
                <a href="showtopic-815.aspx" target="_blank">
新奥尔良烤翅的做法</a>
           </li>            
                      <li>
             <span>[ 
                    <a href="showforum-17.aspx" target="_blank">闲侃灌水区</a>

                ]</span>&nbsp;&nbsp;
                <a href="showtopic-814.aspx" target="_blank">
为80后新人支招</a>
           </li>            
                      <li>
             <span>[ 
                    <a href="showforum-10.aspx" target="_blank">每周好汤</a>
                ]</span>&nbsp;&nbsp;

                <a href="showtopic-813.aspx" target="_blank">
桂圆莲藕汤</a>
           </li>            
                      <li>
             <span>[ 
                    <a href="showforum-17.aspx" target="_blank">闲侃灌水区</a>
                ]</span>&nbsp;&nbsp;
                <a href="showtopic-812.aspx" target="_blank">
很精辟</a>

           </li>            
                      <li>
             <span>[ 
                    <a href="showforum-18.aspx" target="_blank">健康饮食</a>
                ]</span>&nbsp;&nbsp;
                <a href="showtopic-811.aspx" target="_blank">
[健康生活]九大错误饮食会导致越来越肥</a>
           </li>            
                      <li>

             <span>[ 
                    <a href="showforum-9.aspx" target="_blank">开怀大笑</a>
                ]</span>&nbsp;&nbsp;
                <a href="showtopic-810.aspx" target="_blank">
[风趣校园]老师够狠！学生够强悍</a>
           </li>            
                      <li>
             <span>[ 
                    <a href="showforum-20.aspx" target="_blank">厨具选购</a>

                ]</span>&nbsp;&nbsp;
                <a href="showtopic-809.aspx" target="_blank">
选择厨具的5大原则</a>
           </li>            
                      <li>
             <span>[ 
                    <a href="showforum-17.aspx" target="_blank">闲侃灌水区</a>
                ]</span>&nbsp;&nbsp;

                <a href="showtopic-808.aspx" target="_blank">
深圳荔枝公园图片分享</a>
           </li>            
                      <li>
             <span>[ 
                    <a href="showforum-18.aspx" target="_blank">健康饮食</a>
                ]</span>&nbsp;&nbsp;
                <a href="showtopic-807.aspx" target="_blank">
感冒饮食搭配禁忌</a>

           </li>            
                      <li>
             <span>[ 
                    <a href="showforum-11.aspx" target="_blank">小吃天地</a>
                ]</span>&nbsp;&nbsp;
                <a href="showtopic-806.aspx" target="_blank">
潮汕小吃</a>
           </li>            
                      <li>

             <span>[ 
                    <a href="showforum-13.aspx" target="_blank">主食天地</a>
                ]</span>&nbsp;&nbsp;
                <a href="showtopic-805.aspx" target="_blank">
酸辣牛肉粉</a>
           </li>            
                      <li>
             <span>[ 
                    <a href="showforum-13.aspx" target="_blank">主食天地</a>

                ]</span>&nbsp;&nbsp;
                <a href="showtopic-804.aspx" target="_blank">
家常猪肉粉条</a>
           </li>            
</ul>
</div>
<div class="leftList2" id="ywhg2" style="display: none;">
<ul>
                      <li>            
                <a href="showtopic-602.aspx" target="_blank">
蒜蓉空心菜</a>

           </li>            
                      <li>            
                <a href="showtopic-570.aspx" target="_blank">
香芋蒸排骨</a>
           </li>            
                      <li>            
                <a href="showtopic-569.aspx" target="_blank">
香菇蒸排骨</a>
           </li>            
                      <li>            
                <a href="showtopic-595.aspx" target="_blank">
清肠除污,多吃炒猪红</a>

           </li>            
                      <li>            
                <a href="showtopic-584.aspx" target="_blank">
客家经典名菜，酿蛋角</a>
           </li>            
                      <li>            
                <a href="showtopic-675.aspx" target="_blank">
青椒酿肉</a>
           </li>            
                      <li>            
                <a href="showtopic-684.aspx" target="_blank">
青椒肉丝</a>

           </li>            
                      <li>            
                <a href="showtopic-728.aspx" target="_blank">
咖喱牛肉</a>
           </li>            
                      <li>            
                <a href="showtopic-718.aspx" target="_blank">
香酥狗肉的做法</a>
           </li>            
                      <li>            
                <a href="showtopic-603.aspx" target="_blank">
香而不腻的板栗烧肉</a>

           </li>            
                      <li>            
                <a href="showtopic-609.aspx" target="_blank">
家常小炒肉</a>
           </li>            
                      <li>            
                <a href="showtopic-674.aspx" target="_blank">
芦蒿炒肉丝</a>
           </li>            
</ul>
</div>
<div class="leftList2" id="ywhg3" style="display: none;">

<ul>
                      <li>             
                <a href="showtopic-781.aspx" target="_blank">
谁懂我的心剧情大全</a>
           </li>            
                      <li>             
                <a href="showtopic-801.aspx" target="_blank">
煮饭小常识</a>
           </li>            
                      <li>             
                <a href="showtopic-790.aspx" target="_blank">
能忍到第8个不笑的就是高人</a>

           </li>            
                      <li>             
                <a href="showtopic-778.aspx" target="_blank">
周星驰经典台词分享</a>
           </li>            
                      <li>             
                <a href="showtopic-782.aspx" target="_blank">
香茹选购常识</a>
           </li>            
                      <li>             
                <a href="showtopic-793.aspx" target="_blank">
圣诞节祝福语</a>

           </li>            
                      <li>             
                <a href="showtopic-808.aspx" target="_blank">
深圳荔枝公园图片分享</a>
           </li>            
                      <li>             
                <a href="showtopic-812.aspx" target="_blank">
很精辟</a>
           </li>            
                      <li>             
                <a href="showtopic-807.aspx" target="_blank">
感冒饮食搭配禁忌</a>

           </li>            
                      <li>             
                <a href="showtopic-810.aspx" target="_blank">
[风趣校园]老师够狠！学生够强悍</a>
           </li>            
                      <li>             
                <a href="showtopic-773.aspx" target="_blank">
追女求爱技巧（初级）</a>
           </li>            
                      <li>             
                <a href="showtopic-803.aspx" target="_blank">
我们的友谊</a>

           </li>            
</ul>
</div>

 

js源码

Code
 1function showDiv(obj, num, len) {
 2    for (var id = 1; id <= len; id++) {
 3        var ss = obj + id;
 4        var snav = obj + "nav" + id;
 5        if (id == num) {
 6            try { document.getElementById(ss).style.display = "block" } catch (e) { };
 7            try { document.getElementById(snav).className = "on" } catch (e) { };
 8        } else {
 9            try { document.getElementById(ss).style.display = "none" } catch (e) { };
10            try { document.getElementById(snav).className = "" } catch (e) { };
11        }
12    }
13}
14

 

 

CSS样式代码

Code
 1.leftTitle {}{ width:420px; background:url(images/b_bg4.gif) repeat-x 0 bottom; margin:9px auto;}
 2.leftTitle h2 {}{ width:20px; background:url(images/b_i2.gif) no-repeat 5px 8px; float:left; height:20px;}
 3.leftTitle h3 {}{ border:1px solid #CCCCCC; background:#FFFDF6; margin:0 2px; color:#73726F; font-size:14px; font-weight:bold; padding:6px 10px 4px; float:left;}
 4.leftTitle h3 a ,.leftTitle h3 a:visited {}{ color:#73726F;}
 5.leftTitle h3 a:hover {}{ color:#bc2931;}
 6.leftTitle .on {}{ background:#fff; border-bottom:1px solid #fff; color:#000;}
 7.leftTitle .on a ,.leftTitle .on a:visited {}{ color:#000;}
 8.leftTitle .on a:hover {}{ color:#bc2931;}
 9.leftTitle span {}{ padding:9px 0 0 8px; background:url(images/b_i3.gif) no-repeat 0 12px; float:right;}
10.leftTitle span a ,.leftTitle span a:visited {}{ color:#000;}
11.leftTitle span a:hover {}{ color:#bc2931;}

 

源码下载