鼠标滑过一级栏目，出现二级栏目的代码

2024-07-09 22:58:37

字体：大中小

来源：转载

供稿：网友

css

<style>/*对点击下栏显示边框的代码进行美化*/div.hackBox{     display:none;}</style>

<script>function switchTab(cardBar,cardId){    document.getElementById(cardId).className="Selected";    //读出cardContent 下面的所有div标签    var dvs=document.getElementById("cardContent").getElementsByTagName("div");    //循环，判断应该显示的div    for (i=0;i<dvs.length;i++ ){        if (dvs[i].id==("D"+cardId)){            dvs[i].style.display="block";        }else{            dvs[i].style.display="none";        }    }}</script>

html

<BODY>    <table width="950" border="0" id="cardBar">  <tr>    <td id="card0"><a href="#"  onMouseOver="javascript:switchTab('cardBar','card0');">栏目</a></td>    <td id="card1"><a href="#"  onMouseOver="javascript:switchTab('cardBar','card1');">栏目</a></td>    <td id="card2"><a href="#"  onMouseOver="javascript:switchTab('cardBar','card2');">栏目</a></td>    <td id="card3"><a href="#"  onMouseOver="javascript:switchTab('cardBar','card3');">栏目</a></td>    <td id="card4"><a href="#"  onMouseOver="javascript:switchTab('cardBar','card4');">栏目</a></td>    <td id="card5"><a href="#"  onMouseOver="javascript:switchTab('cardBar','card5');">栏目</a></td>    <td id="card6"><a href="#"  onMouseOver="javascript:switchTab('cardBar','card6');">栏目</a></td>    <td id="card7"><a href="#"  onMouseOver="javascript:switchTab('cardBar','card7');">栏目</a></td> <td id="card8"><a href="#"  onMouseOver="javascript:switchTab('cardBar','card8');">栏目</a></td>    <td id="card9"><a href="#"  onMouseOver="javascript:switchTab('cardBar','card9');">栏目</a></td>    <td id="card10"><a href="#"  onMouseOver="javascript:switchTab('cardBar','card10');">栏目</a></td>  </tr></table>  <table width="974" border="0" height="30" bgcolor="#E3C9CA" align="center" id="cardContent">  <tr>    <td align="center">        <div id="Dcard0" class="hackBox">文字连接0</div>        <div id="Dcard1" class="hackBox">文字连接1</div>        <div id="Dcard2" class="hackBox">文字连接2</div>        <div id="Dcard3" class="hackBox">文字连接3</div>         <div id="Dcard4" class="hackBox">文字连接4</div>         <div id="Dcard5" class="hackBox">文字连接5</div>         <div id="Dcard6" class="hackBox">文字连接6</div>          <div id="Dcard7" class="hackBox">文字连接7</div>         <div id="Dcard8" class="hackBox">文字连接8</div>         <div id="Dcard9" class="hackBox">文字连接9</div>         <div id="Dcard10" class="hackBox">文字连接10</div>  </td>  </tr></table>  </BODY></HTML>

上一篇：防采集功能使用说明

下一篇：教你修改会员发布投稿的模板