一个页面显示多组Tab菜单

最新推荐文章于 2022-11-17 14:08:52 发布

原创最新推荐文章于 2022-11-17 14:08:52 发布 · 1.5k 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#javascript #div #float #function #html #文档

本文介绍了一个使用HTML和JavaScript实现的高考复习资源导航栏设计，该设计通过鼠标悬停效果切换显示不同的复习内容区块，包括第一轮复习、二轮强化等阶段的学习资料。

代码如下：

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

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

<style type="text/css">

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

<SCRIPT language=javascript type=text/javascript>

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>

<div id="nrz">

<div id="zgkyy">

<ul>

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

<li id="divtop12" onmouseover="javascript:changebg(0,2);" onmouseout="javascript:changebg(0,1);"><a href="http://gaokao.ewstudy.com/elzttp/index.html" target="_blank">二轮强化1</a></li>

<li id="divtop13" onmouseover="javascript:changebg(0,3);" onmouseout="javascript:changebg(0,1);"><a href="http://gaokao.ewstudy.com/slytcc/index.html" target="_blank">模拟冲刺1</a></li>

<li id="divtop14" onmouseover="javascript:changebg(0,4);" onmouseout="javascript:changebg(0,1);"><a href="http://gaokao.ewstudy.com/xtfx/index.html" target="_blank">高考练习1</a></li>

<li id="divtop15" onmouseover="javascript:changebg(0,5);" onmouseout="javascript:changebg(0,1);"><a href="http://gaokao.ewstudy.com/tlky/index.html" target="_blank">听力口语1</a></li>

</ul>

</div>

</div>

<div id="nrzx">

<div id="nrzx0">

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

<DIV id="divct12" style="display: none">二轮强化1</DIV>

<DIV id="divct13" style="display: none">模拟冲刺1</DIV>

<DIV id="divct14" style="display: none">高考练习1</DIV>

<DIV id="divct15" style="display: none">听力口语1</span></DIV>

</div>

</div>

<div id="nrz">

<div id="zgkyy">

<ul>

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

<li id="divtop22" onmouseover="javascript:changebg(1,2);" onmouseout="javascript:changebg(1,1);"><a href="http://gaokao.ewstudy.com/elzttp/index.html" target="_blank">二轮强化2</a></li>

<li id="divtop23" onmouseover="javascript:changebg(1,3);" onmouseout="javascript:changebg(1,1);"><a href="http://gaokao.ewstudy.com/slytcc/index.html" target="_blank">模拟冲刺2</a></li>

<li id="divtop24" onmouseover="javascript:changebg(1,4);" onmouseout="javascript:changebg(1,1);"><a href="http://gaokao.ewstudy.com/xtfx/index.html" target="_blank">高考练习2</a></li>

<li id="divtop25" onmouseover="javascript:changebg(1,5);" onmouseout="javascript:changebg(1,1);"><a href="http://gaokao.ewstudy.com/tlky/index.html" target="_blank">听力口语2</a></li>

</ul>

</div>

</div>

<div id="nrzx">

<div id="nrzx0">

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

<DIV id="divct22" style="display: none">二轮强化2</DIV>

<DIV id="divct23" style="display: none">模拟冲刺2</DIV>

<DIV id="divct24" style="display: none">高考练习2</DIV>

<DIV id="divct25" style="display: none">听力口语2</span></DIV>

</div>

</div>

<div id="nrz">

<div id="zgkyy">

<ul>

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

<li id="divtop32" onmouseover="javascript:changebg(2,2);" onmouseout="javascript:changebg(2,1);"><a href="http://gaokao.ewstudy.com/elzttp/index.html" target="_blank">二轮强化3</a></li>

<li id="divtop33" onmouseover="javascript:changebg(2,3);" onmouseout="javascript:changebg(2,1);"><a href="http://gaokao.ewstudy.com/slytcc/index.html" target="_blank">模拟冲刺3</a></li>

<li id="divtop34" onmouseover="javascript:changebg(2,4);" onmouseout="javascript:changebg(2,1);"><a href="http://gaokao.ewstudy.com/xtfx/index.html" target="_blank">高考练习3</a></li>

<li id="divtop35" onmouseover="javascript:changebg(2,5);" onmouseout="javascript:changebg(2,1);"><a href="http://gaokao.ewstudy.com/tlky/index.html" target="_blank">听力口语3</a></li>

</ul>

</div>

</div>

<div id="nrzx">

<div id="nrzx0">

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

<DIV id="divct32" style="display: none">二轮强化3</DIV>

<DIV id="divct33" style="display: none">模拟冲刺3</DIV>

<DIV id="divct34" style="display: none">高考练习3</DIV>

<DIV id="divct35" style="display: none">听力口语3</span></DIV>

</div>

</div>

</body>

</html>

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。