各大门户网站流行的菜单表格

最新推荐文章于 2022-04-29 08:35:14 发布

原创最新推荐文章于 2022-04-29 08:35:14 发布 · 903 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#table #class #border #div #html #function

网页开发专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用 HTML 和 JavaScript 实现的菜单和内容显示效果。通过简单的鼠标悬停操作即可改变菜单样式并展示不同内容面板。此方案适用于初学者了解基本网页交互设计。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

/*菜单表格*/

.menutable {

background-color:#FFD2DC;

border-top:1px solid #CE1733;

border-right:1px solid #CE1733;

border-spacing:0px;

border-collapse:collapse;

}

.menutable td {

border-bottom:1px solid #CE1733;

border-left:1px solid #CE1733;

font-size:10pt;

text-align:center;

cursor:pointer;

}

.menutable td.focus {

background-color:#FFFFFF;

border-bottom:1px solid #FFFFFF;

}

a:hover {

text-decoration: underline;

}

a {

font-size: 10pt;

color: #000000;

text-decoration: none;

}

/*内容表格*/

.infotable

{

border-left:1px solid #CE1733;

border-right:1px solid #CE1733;

border-bottom:1px solid #CE1733;

border-spacing:0px;

border-collapse:collapse;

}

.dis {

display:block;

}

.undis {

display:none;

}

</style>

function fod(target,panel)

{

target.className="focus";

var p = target.parentNode.getElementsByTagName("td");

var dlist = document.getElementById(panel).getElementsByTagName("div");

for(i=0;i<p.length;i++)

{

if(p[i] == target)

{

p[i].className="focus";

dlist[i].className="dis";

}

else

{

p[i].className="";

dlist[i].className="undis";

}

</script>

</head>

<body>

<tr>

</tr>

</table>

<tr>

<tr>

<td>table1</td>

</tr>

</table>

</div>

<tr>

<td>table2</td>

</tr>

</table>

</div>

<tr>

<td>table3</td>

</tr>

</table>

</div>

</td>

</tr>

</table>

<p/>

<tr>

</tr>

</table>

<tr>

<tr>

<td>table1</td>

</tr>

</table>

</div>

<tr>

<td>table2</td>

</tr>

</table>

</div>

<tr>

<td>table3</td>

</tr>

</table>

</div>

</td>

</tr>

</table>

</body>

</html>