CSS + div 选项卡

最新推荐文章于 2022-09-06 12:08:21 发布

转载最新推荐文章于 2022-09-06 12:08:21 发布 · 90 阅读

文章标签：

本文介绍了一个使用HTML和JavaScript实现的动态菜单系统。通过简单的HTML结构配合JavaScript代码，实现了菜单项的高亮显示及内容切换功能。文章展示了如何通过修改CSS样式来改变菜单外观，并利用JavaScript函数控制不同内容区块的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<head>

<title> new document </title>

/**//*Credits: Dynamic Drive CSS Library */

/**//*URL: http://www.dynamicdrive.com/style/ */

#modernbricksmenu{

}{

padding: 0;

width: 100%;

background: transparent;

voice-family: "\"}\"";

voice-family: inherit;

}

#modernbricksmenu ul{

}{

font: bold 11px Arial;

margin:0;

margin-left: 40px; /**//*margin between first menu item and left browser edge*/

padding: 0;

list-style: none;

}

#modernbricksmenu li{

}{

display: inline;

margin: 0 2px 0 0;

padding: 0;

text-transform:uppercase;

}

#modernbricksmenu a{

}{

float: left;

display: block;

color: white;

margin: 0 1px 0 0; /**//*Margin between each menu item*/

padding: 5px 10px;

text-decoration: none;

letter-spacing: 1px;

background-color: black; /**//*Default menu color*/

border-bottom: 1px solid white;

}

#modernbricksmenu a:hover{

}{

background-color: gray; /**//*Menu hover bgcolor*/

}

#modernbricksmenu #current a{

}{ /**//*currently selected tab*/

background-color: #D25A0B; /**//*Brown color theme*/

border-color: #D25A0B; /**//*Brown color theme*/

}

#modernbricksmenuline{

}{

clear: both;

padding: 0;

width: 100%;

height: 5px;

line-height: 5px;

background: #D25A0B; /**//*Brown color theme*/

}

</style>

</head>

<body>

<ul>

<li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised">Revised</a></li>

<li><a href="http://tools.dynamicdrive.com" title="Tools">Tools</a></li>

<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums">Forums</a></li>

</ul>

</div>

</body>

</html>

td {

}{

font-size: 12px;

color: #000000;

line-height: 150%;

}

.sec1 {

}{

background-color: #EEEEEE;

cursor: hand;

color: #000000;

border-left: 1px solid #FFFFFF;

border-top: 1px solid #FFFFFF;

border-right: 1px solid gray;

border-bottom: 1px solid #FFFFFF

}

.sec2 {

}{

background-color: #D4D0C8;

cursor: hand;

color: #000000;

border-left: 1px solid #FFFFFF;

border-top: 1px solid #FFFFFF;

border-right: 1px solid gray;

font-weight: bold;

}

.main_tab {

}{

background-color: #D4D0C8;

color: #000000;

border-left:1px solid #FFFFFF;

border-right: 1px solid gray;

border-bottom: 1px solid gray;

}

</style>

function secBoard(n)

{

for(i=0;i<secTable.cells.length;i++)

secTable.cells[i].className="sec1";

secTable.cells[n].className="sec2";

for(i=0;i<mainTable.tBodies.length;i++)

mainTable.tBodies[i].style.display="none";

mainTable.tBodies[n].style.display="block";

}

</script>

<td class=sec2 width=10% onclick="secBoard(0)">关于TBODY标记</td>

<td class=sec1 width=10% onclick="secBoard(1)">关于cells集合</td>

<td class=sec1 width=10% onclick="secBoard(2)">关于tBodies集合</td>

<td class=sec1 width=10% onclick="secBoard(3)">关于display属性</td>

</tr>

</table>

<tr>

<br>

这里填加内容，略去。1 </td>

</tr>

</tbody> <tbody style="display:none;">

<tr>

<br>

这里填加内容，略去。2 </td>

</tr>

</tbody> <tbody style="display:none;">

<tr>

<br>

这里填加内容，略去。3 </td>

</tr>

</tbody> <tbody style="display:none;">

<tr>

<br>

这里填加内容，略去。4 </td>

</tr>

</tbody>

</table>