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 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>
