js控制通过左右按键控制内容显示隐藏
<script>now_at=0;functionshowOrHide(_id){document.getElementById('m1').style.display=...
<script>
now_at = 0;
function showOrHide(_id){
document.getElementById('m1').style.display='none';
document.getElementById('m2').style.display='none';
document.getElementById('m3').style.display='none';
document.getElementById('m'+_id).style.display='block';
}
</script>
<div 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>
</div>
<div 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>
</div>
<div 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>
</div>
<div id="left"><a style="color:#ff0000;" href="javascript:void(0);" onclick="showOrHide(1)">上</a></div>
<div id="right"><a style="color:#ff0000;" href="javascript:void(0);" onclick="showOrHide(2)">下</a></div>
一共有三个div通过上和下点击显示每个div,在第一个的时候按下显示第二个，隐藏第一和第三个，现在我无法做到第二个显示隐藏，求帮忙看下 展开
now_at = 0;
function showOrHide(_id){
document.getElementById('m1').style.display='none';
document.getElementById('m2').style.display='none';
document.getElementById('m3').style.display='none';
document.getElementById('m'+_id).style.display='block';
}
</script>
<div 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>
</div>
<div 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>
</div>
<div 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>
</div>
<div id="left"><a style="color:#ff0000;" href="javascript:void(0);" onclick="showOrHide(1)">上</a></div>
<div id="right"><a style="color:#ff0000;" href="javascript:void(0);" onclick="showOrHide(2)">下</a></div>
一共有三个div通过上和下点击显示每个div,在第一个的时候按下显示第二个，隐藏第一和第三个，现在我无法做到第二个显示隐藏，求帮忙看下 展开
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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
