1. 爱易网页
2. JS特效
3. 选项卡做法

日期：2014-05-18　 浏览次数：20441 次

以下是HTML网页特效代码，点击运行按钮可查看效果：

以下是程序代码

<style> .box{width:204px;padding-bottom:10px;} .boxNav ul{ padding:0; margin:0;} .boxNav ul li{width:100px; border:1px solid #444444; float:left; cursor:pointer; text-align:center; font-size:12px;} .boxContent{width:202px; border:1px dashed #444444;} .normaltab{color:#FF0000; font-weight:bold; background-color:#FFFFFF; display:block;} .hovertab{color:#444444; font-weight:400; display:block; background-color:#CCCCCC;} .see{display:block;} .nosee{display:none;} </style> <script language="javascript"> function $(id){return document.getElementById(id);} function clickNav(n){ for(i=1;i<=2;i++){ $('boxNav'+i).className='normaltab'; $('boxContent'+i).className='nosee'; } $('boxNav'+n).className='hovertab'; $('boxContent'+n).className='see'; } function showbox(){ if($('smallbox').checked==true){ $('aa').style.display='none'; }else{ $('aa').style.display='block'; } } //function btnbox(){ // if($('bb').style.display=='block';){ // $('btn').value='隐藏'; // }else{ // $('btn').value='显示'; // $('bb').style.display='none'; // } // //} function hhh() { if($("bb").style.display=="block") { $("bb").style.display="none"; $("btn").value="显示"; }else { $("bb").style.display="block"; $("btn").value="隐藏"; } } </script> <div class="box"> <div class="boxNav" id="boxNav"> <ul> <li id="boxNav1" class="hovertab" onmouseover="clickNav(1)">钱袋</li> <li id="boxNav2" class="normaltab" onmouseover="clickNav(2)">商务</li> </ul> </div> <div class="boxContent"> <div class="see" id="boxContent1"> <ul> <li>aaaaaaa</li> <li>bbbbbbb</li> <li>ccccccc</li> </ul> </div> <div class="nosee" id="boxContent2"> <ul> <li>ddddddd</li> <li>eeeeeee</li> <li>fffffff</li> </ul> </div> </div> </div></font> <a href="http://js.aiyiweb.com/">欢迎访问爱易网网页特效代码站，js.aiyiweb.com</a>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]