css代码

<style>


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

js代码

<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  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  border="0"  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>
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。