js控制通过左右按键控制内容显示隐藏
发布网友
共1个回答
热心网友
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>recursion</title>
<style type="text/css">
div {
position: absolute;
}
div#left {
float: left;
}
div#right {
float: right;
left: 100px;
}
</style>
<script type="text/javascript">
var INDEX = 1;
function showOrHide (which)
{
document.getElementById ('m' + INDEX).style.display = 'none';
switch (which)
{
case 1:
INDEX--;
INDEX = INDEX < 1 ? 3 : INDEX;
document.getElementById ('m' + INDEX).style.display = 'block';
break;
case 2:
INDEX++;
INDEX = INDEX > 3 ? 1 : INDEX;
document.getElementById ('m' + INDEX).style.display = 'block';
break;
}
}
</script>
</head>
<body>
<ul id="m1" style="display: block;">
<li><a href="#">大米</a>
</li>
<li><a href="#">醋</a>
</li>
<li><a href="#">黄油</a>
</li>
<li><a href="#">玉米</a>
</li>
<li><a href="#">花生</a>
</li>
<li><a href="#">牛轧</a>
</li>
</ul>
<ul id="m2" style="display: none;">
<li><a href="#">西瓜</a>
</li>
<li><a href="#">草莓</a>
</li>
<li><a href="#">橙子</a>
</li>
<li><a href="#">香蕉</a>
</li>
<li><a href="#">玉米</a>
</li>
<li><a href="#">罐头</a>
</li>
</ul>
<ul id="m3" style="display: none;">
<li><a href="#">电话</a>
</li>
<li><a href="#">铅笔</a>
</li>
<li><a href="#">纸盒</a>
</li>
<li><a href="#">日历</a>
</li>
<li><a href="#">钱包</a>
</li>
<li><a href="#">杯子</a>
</li>
</ul>
<div id="left">
<a style="color: #ff0000;" href="#" onclick="showOrHide(1)">上</a>
</div>
<div id="right">
<a style="color: #ff0000;" href="#" onclick="showOrHide(2)">下</a>
</div>
</body>
</html>
