網站上常常會出現各種特效，這些特效好看是好看，不過真是折騰人哪！昨天寫一個標籤式頁面切換的代碼寫得我十分糾結，也就是昨天，我才知道這種切換的專業名字叫做“滑動門切換”。下面就寫寫實現它的代碼，以後就方便使用了。特殊的一般要改的地方我做了一些標記（用紅色字體）：
它的css代碼是：
div,ul,li,h4 { margin:0; padding:0;font-size:12px; list-style:none}
#box {width:246px;border:1px #95CF92 solid;padding:1px;}
#box h4 {float:left;width:82px;height:30px;line-height:25px;text-align:center;font-size:12px;over-flow:hidden}
#box h4.menuNo {font-weight:normal;color:#333333;
background:url(http://img.lingd.net/attachments/date_201101/34d653d2cf6940d4ab71ff96419d0ca6.jpg) repeat-x}
#box h4.menuOn {font-weight:bold;color:#ffffff;
background:url(http://img.lingd.net/attachments/date_201101/abb21edb0e291996aa93e3f6245491a6.jpg) no-repeat}
#box .list_none {display:none}
#box .list {margin:0px;padding:5px;height:auto}
#box .list ul {margin:0px;padding:0px}
#box .list li {line-height:20px; clear:both}
#box .list li span {font-size:12px;font-weight:normal;color:#ffffff;padding-left:4px;padding-right:8px}
#box .list li.one { background:url(http://img.lingd.net/attachments/date_201105/f5f7e528a7425f74a0222e4ec781f94e.gif) no-repeat}
#box .list li.two {background:url(http://img.lingd.net/attachments/date_201105/3a5c77c25de8d7d91f12354d584fa9c1.gif) no-repeat}
#box .list li.thr {background:url(http://img.lingd.net/attachments/date_201105/0617d4acd95ae069f88331fa491aa776.gif) no-repeat}
對應源代碼形式是：（藍色內容可自行編輯）
<div id="box">
<script language="javascript">
function switchmodTag(modtag,modcontent,modk) {
for(i=1; i <4; i++) {
if (i==modk) {
document.getElementById(modtag+i).className="menuOn";document.getElementById(modcontent+i).className="list";}
else {
document.getElementById(modtag+i).className="menuNo";document.getElementById(modcontent+i).className="list_none";}
}
}
</script>
<h4 class="menuOn" id="mod1" οnmοuseοver="switchmodTag('mod','list','1');this.blur();">
最近更新</h4>
<h4 class="menuNo" id="mod2" οnmοuseοver="switchmodTag('mod','list','2');this.blur();">
近期推薦</h4>
<h4 class="menuNo" id="mod3" οnmοuseοver="switchmodTag('mod','list','3');this.blur();">
熱門點擊</h4>
<div class="list" id="list1">
<ul>
<li class="one"><span>1</span><a href="http://xu123.lingd.net/list-1207049-1.html">最近更新的信息</a></li>
<li class="one"><span>2</span><a href="#">最近更新的信息</a></li>
<li class="one"><span>3</span><a href="#">最近更新的信息</a></li>
<li class="one"><span>4</span><a href="#">最近更新的信息</a></li>
<li class="one"><span>5</span><a href="#">最近更新的信息</a></li>
<li class="one"><span>6</span><a href="#">最近更新的信息</a></li>
<li class="one"><span>7</span><a href="#">最近更新的信息</a></li>
<li class="one"><span>8</span><a href="#">最近更新的信息</a></li>
</ul>
</div>
<div class="list_none" id="list2">
<ul>
<li class="two"><span>1</span><a href="http://xu123.lingd.net/list-1209116-1.html">近期推薦的信息</a></li>
<li class="two"><span>2</span><a href="#">近期推薦的信息</a></li>
<li class="two"><span>3</span><a href="#">近期推薦的信息</a></li>
<li class="two"><span>4</span><a href="#">近期推薦的信息</a></li>
<li class="two"><span>5</span><a href="#">近期推薦的信息</a></li>
<li class="two"><span>6</span><a href="#">近期推薦的信息</a></li>
<li class="two"><span>7</span><a href="#">近期推薦的信息</a></li>
<li class="two"><span>8</span><a href="#">近期推薦的信息</a></li>
</ul>
</div>
<div class="list_none" id="list3">
<ul>
<li class="thr"><span>1</span><a href="http://xu123.lingd.net/list-2178959-1.html">熱門點擊的信息</a></li>
<li class="thr"><span>2</span><a href="#">熱門點擊的信息</a></li>
<li class="thr"><span>3</span><a href="#">熱門點擊的信息</a></li>
<li class="thr"><span>4</span><a href="#">熱門點擊的信息</a></li>
<li class="thr"><span>5</span><a href="#">熱門點擊的信息</a></li>
<li class="thr"><span>6</span><a href="#">熱門點擊的信息</a></li>
<li class="thr"><span>7</span><a href="#">熱門點擊的信息</a></li>
<li class="thr"><span>8</span><a href="#">熱門點擊的信息</a></li>
</ul>
</div>
</div>