如何让一个网页中包含多个不同内容，并用快捷键控制不同内容的显示
一个html文件，我想要打开这个文件时只显示内容01，然后当我按键盘上的字母M时，显示的内容01会变成内容02。当显示内容02时，我如果按键盘上的字母M，显示的内容就会从...
一个html文件，我想要打开这个文件时只显示内容01，然后当我按键盘上的字母M时，显示的内容01会变成内容02。
当显示内容02时，我如果按键盘上的字母M，显示的内容就会从内容02变为内容03；我如果按字母N，显示的内容就会从内容02变为前一个内容也就是内容01；我如果按字母B，显示的内容就会从内容02变为第一个内容也就是内容01。
当显示内容03时，我如果按键盘上的字母M，显示的内容就会从内容03变为内容04；我如果按字母N，显示的内容就会从内容03变为前一个内容也就是内容02；我如果按字母B，显示的内容就会从内容03变为第一个内容也就是内容01。
当显示内容04时，我如果按键盘上的字母M，显示的内容就会从内容04变为内容05；我如果按字母N，显示的内容就会从内容04变为前一个内容也就是内容03；我如果按字母B，显示的内容就会从内容04变为第一个内容也就是内容01。
当显示内容05时（假设总共只有5个内容，内容05是最后一个），我如果按键盘上的字母M，此时显示的内容应该不变，因为内容05是最后一个，不存在下一个内容；我如果按字母N，显示的内容就会从内容05变为前一个内容也就是内容04；我如果按字母B，显示的内容就会从内容05变为第一个内容也就是内容01。
请问这样一个html文件应该怎样写？请给出完整的代码，谢谢！
以上的内容1到5都是一段文字 展开
当显示内容02时，我如果按键盘上的字母M，显示的内容就会从内容02变为内容03；我如果按字母N，显示的内容就会从内容02变为前一个内容也就是内容01；我如果按字母B，显示的内容就会从内容02变为第一个内容也就是内容01。
当显示内容03时，我如果按键盘上的字母M，显示的内容就会从内容03变为内容04；我如果按字母N，显示的内容就会从内容03变为前一个内容也就是内容02；我如果按字母B，显示的内容就会从内容03变为第一个内容也就是内容01。
当显示内容04时，我如果按键盘上的字母M，显示的内容就会从内容04变为内容05；我如果按字母N，显示的内容就会从内容04变为前一个内容也就是内容03；我如果按字母B，显示的内容就会从内容04变为第一个内容也就是内容01。
当显示内容05时（假设总共只有5个内容，内容05是最后一个），我如果按键盘上的字母M，此时显示的内容应该不变，因为内容05是最后一个，不存在下一个内容；我如果按字母N，显示的内容就会从内容05变为前一个内容也就是内容04；我如果按字母B，显示的内容就会从内容05变为第一个内容也就是内容01。
请问这样一个html文件应该怎样写？请给出完整的代码，谢谢！
以上的内容1到5都是一段文字 展开
2个回答
2014-11-10 · 知道合伙人软件行家
yfcp
知道合伙人软件行家
采纳数：1748
获赞数：5545
有多年网站建设相关工作经验。熟悉ASP、ASP.net、VB、JavaScript、HTML等语言和CSS、Ajax等相关技术。
向TA提问 私信TA
关注
![]()
展开全部
你好，简单写了一下，纯手动代码。希望能符合你的要求。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV层切换</title>
<style>
*{margin:0;padding:0;}img{border:0;}em{font-style:normal;}
body,html{color:#666666;background:#ffffff;font:14px 微软雅黑,宋体,Tahoma,Geneva,sans-serif;text-align:center}
li{float:left;list-style:none;text-align:left;display:inline;overflow:hidden;}
.main{clear:both;width:420px;padding:5px 0px 0px 0px;margin:auto;}
.m{float:left;width:405px;height:30px;border:1px solid #CFCFCF;}
.m li{float:left;width:80px;height:30px;line-height:30px;display:block;cursor:hand;text-align:center;border-right:1px solid #CFCFCF }
.f{float:left;width:405px;height:130px;border:1px solid #CFCFCF;border-top:0;}
.f li{line-height:50px;padding-left:30px;display:none;}
</style>
<script>
function $(v){return document.getElementById(v);}
var x=0;
var z=4;//总内容数
function a(h){
$("b"+x).style.display="none"; //隐藏显示层
$("b"+h).style.display="block"; //显示当前层
x=h;
}
document.onkeydown=nexta;
function nexta(event){
event=event?event:(window.event?window.event:null);
var pkey=event.keyCode;//获得按键
if(pkey==77 & (x<4)){a(x+1);}//按m
if(pkey==78 & (x>0)){a(x-1);}//按n
if(pkey==66 & (x>0)){a(0);}//按b
}
</script>
</head>
<body>
<div class="main">
<div class="m"><ul>
<li onclick="a(0)">内容1</li>
<li onclick="a(1)">内容2</li>
<li onclick="a(2)">内容3</li>
<li onclick="a(3)">内容4</li>
<li onclick="a(4)">内容5</li>
</ul>
</div>
<div class="f">
<ul>
<li id="b0" style="display:block;">显示的内容1</li>
<li id="b1">显示的内容2</li>
<li id="b2">显示的内容3</li>
<li id="b3">显示的内容4</li>
<li id="b4">显示的内容5</li>
</ul>
</div>
</div>
</body>
</html>
更多追问追答
追问
您好，非常感谢您的回答，不过我还有疑问，其实我要编写的html需要显示的内容数目并不是固定的5个，而是不定数目的，最少1个，最多99个。我想页面最上方的用来点击切换的按钮固定为1排10个，需要显示的内容还是在所有按钮的下方，宽度与1排10个按钮的宽度一致。
麻烦您照这种样式写个包含23个内容的代码作为例子，万分感谢！
追答
你的追问描述不清晰。我给你的代码只是代码功能的演示，使用时肯定要根据实际情况结合你自己的页面。
至于显示多少个，无非就是排版的问题了。自己调整一下css宽度，增加一些内容就可以了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
