加入收藏 | 设为首页 | 会员中心 | 我要投稿 厦门网 (https://www.xiamenwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 教程 > 正文

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

发布时间:2021-03-05 11:45:46 所属栏目:教程 来源:网络整理
导读:style /*对点击下栏显示边框的代码进行美化*/ div.hackBox{ display:none; } /style script function switchTab(cardBar,cardId){ document.getElementById(cardId).className="Selected"; //读出cardContent 下面的所有div标签 var dvs=document.getElement

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

(编辑:厦门网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读