一个页面显示多组Tab菜单

最新推荐文章于 2023-05-30 22:05:03 发布

sunsnow_swift

最新推荐文章于 2023-05-30 22:05:03 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript div float function html 文档

本文链接：https://blog.youkuaiyun.com/sunsnow_swift/article/details/1921408

本文介绍了一个使用HTML和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>无标题文档</title>

#zgkyy {

width: 500px;

padding-top: 5px;

padding-right: 20px;

padding-bottom: 5px;

padding-left: 10px;

float: left;

color: #02700A;

}

/*利用padding:20px 20px 0 0来固定菜单位置*/

#zgkyy ul {

float:left;

list-style:none;

margin:5px;

width: 500px;

padding: 5px;

height: 40px;

}

/*添加了float:right使得菜单位于页面右侧*/

#zgkyy ul li {

float:left;

margin:0 3px;

display:block;

line-height:12px;

color: #02700A;

font-size: 12px;

}

#nrzx0{

float:left;

width:699px;

height:50px;

line-height: 20px;

text-decoration: none;

font-size: 12px;

line-height: 20px;

color: #000000;

margin: 5px;

display:inline;

}

</style>

var currentId = 1;

var divtop={0:"divtop1",1:"divtop2",2:"divtop3",3:"divtop4"}

var divct={0:"divct1",1:"divct2",2:"divct3",3:"divct4"}

function changebg(i,id){

//document.getElementById(divtop[i]+currentId).classname="";

document.getElementById(divct[i]+currentId).style.display="none";

//document.getElementById(divtop[i]+id).classname="";

document.getElementById(divct[i]+id).style.display="";

currentId=id;

}

</SCRIPT>

</head>

<body>

<ul>

<li id="divtop11" onmouseover="javascript:changebg(0,1);"><a href="http://gaokao.ewstudy.com/dylzfx/index.html" target="_blank">第一轮复习1</a></li>

</ul>

</div>

<DIV id="divct11" style="display: ''">高考第一轮总复习1</DIV>

</div>

<ul>

<li id="divtop21" onmouseover="javascript:changebg(1,1);"><a href="http://gaokao.ewstudy.com/dylzfx/index.html" target="_blank">第一轮复习2</a></li>

</ul>

</div>

<DIV id="divct21" style="display: ''">高考第一轮总复习2</DIV>

</div>

<ul>

<li id="divtop31" onmouseover="javascript:changebg(2,1);"><a href="http://gaokao.ewstudy.com/dylzfx/index.html" target="_blank">第一轮复习3</a></li>

</ul>

</div>

<DIV id="divct31" style="display: ''">高考第一轮总复习3</DIV>

</div>

</body>

</html>