仿网易娱乐新闻Tab选项卡的html源码
<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>
<a href="showtopic-815.aspx" target="_blank">
新奥尔良烤翅的做法</a>
</li>
<li>
<span>[
<a href="showforum-17.aspx" target="_blank">闲侃灌水区</a>
]</span>
<a href="showtopic-814.aspx" target="_blank">
为80后新人支招</a>
</li>
<li>
<span>[
<a href="showforum-10.aspx" target="_blank">每周好汤</a>
]</span>
<a href="showtopic-813.aspx" target="_blank">
桂圆莲藕汤</a>
</li>
<li>
<span>[
<a href="showforum-17.aspx" target="_blank">闲侃灌水区</a>
]</span>
<a href="showtopic-812.aspx" target="_blank">
很精辟</a>
</li>
<li>
<span>[
<a href="showforum-18.aspx" target="_blank">健康饮食</a>
]</span>
<a href="showtopic-811.aspx" target="_blank">
[健康生活]九大错误饮食会导致越来越肥</a>
</li>
<li>
<span>[
<a href="showforum-9.aspx" target="_blank">开怀大笑</a>
]</span>
<a href="showtopic-810.aspx" target="_blank">
[风趣校园]老师够狠!学生够强悍</a>
</li>
<li>
<span>[
<a href="showforum-20.aspx" target="_blank">厨具选购</a>
]</span>
<a href="showtopic-809.aspx" target="_blank">
选择厨具的5大原则</a>
</li>
<li>
<span>[
<a href="showforum-17.aspx" target="_blank">闲侃灌水区</a>
]</span>
<a href="showtopic-808.aspx" target="_blank">
深圳荔枝公园图片分享</a>
</li>
<li>
<span>[
<a href="showforum-18.aspx" target="_blank">健康饮食</a>
]</span>
<a href="showtopic-807.aspx" target="_blank">
感冒饮食搭配禁忌</a>
</li>
<li>
<span>[
<a href="showforum-11.aspx" target="_blank">小吃天地</a>
]</span>
<a href="showtopic-806.aspx" target="_blank">
潮汕小吃</a>
</li>
<li>
<span>[
<a href="showforum-13.aspx" target="_blank">主食天地</a>
]</span>
<a href="showtopic-805.aspx" target="_blank">
酸辣牛肉粉</a>
</li>
<li>
<span>[
<a href="showforum-13.aspx" target="_blank">主食天地</a>
]</span>
<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源码
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样式代码
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;}