求js代码：用键盘控制网页内容的隐藏和显示
我现有的代码如下，点相应的按钮可以显示或隐藏其右侧的文字，我现在想用键盘控制，而不是点击按钮。就是比如按下down键，就可以按顺序把隐藏的文字（也可以是图片等）一行一行的...
我现有的代码如下，点相应的按钮可以显示或隐藏其右侧的文字，我现在想用键盘控制，而不是点击按钮。就是比如按下down键，就可以按顺序把隐藏的文字（也可以是图片等）一行一行的显示出来，相当于按顺序点击按钮，或是按下up键就可以按倒序把显示着的文字隐藏起来。例如已经显示的是第一行到第五行，如果这时我按up键，就是隐藏第五行，再按一次隐藏第四行，以此类推，如果我按down键就是显示第六行，再按显示第七行。
<script type="text/javascript">
function display(id){
var traget=document.getElementById(id);
if(traget.style.visibility=="visible")
{ traget.style.visibility="hidden";
}else{ traget.style.visibility="visible";
}
}
</script>
<style>
span{visibility:hidden;}
</style>
<table>
<tr >
<td >
<input type="button" id="btndown" onclick="display('1')" value="1"/>
<span id="1" >显示内容1</span><br>
<input type="button" id="btndown" onclick="display('2')" value="2"/>
<span id="2">显示内容2</span><br>
<input type="button" id="btndown" onclick="display('3')" value="3"/>
<span id="3">显示内容3</span><br>
<input type="button" id="btndown" onclick="display('4')" value="4"/>
<span id="4">显示内容4</span><br>
<input type="button" id="btndown" onclick="display('5')" value="5"/>
<span id="5">显示内容5</span><br>
<input type="button" id="btndown" onclick="display('6')" value="6"/>
<span id="6">显示内容6</span><br>
<input type="button" id="btndown" onclick="display('7')" value="7"/>
<span id="7">显示内容7</span><br>
<input type="button" id="btndown" onclick="display('8')" value="8"/>
<span id="8">显示内容8</span><br>
<input type="button" id="btndown" onclick="display('9')" value="9"/>
<span id="9">显示内容9</span><br>
<input type="button" id="btndown" onclick="display('10')" value="10"/>
<span id="10">显示内容10</span></td>
</td>
</tr>
</table> 展开
<script type="text/javascript">
function display(id){
var traget=document.getElementById(id);
if(traget.style.visibility=="visible")
{ traget.style.visibility="hidden";
}else{ traget.style.visibility="visible";
}
}
</script>
<style>
span{visibility:hidden;}
</style>
<table>
<tr >
<td >
<input type="button" id="btndown" onclick="display('1')" value="1"/>
<span id="1" >显示内容1</span><br>
<input type="button" id="btndown" onclick="display('2')" value="2"/>
<span id="2">显示内容2</span><br>
<input type="button" id="btndown" onclick="display('3')" value="3"/>
<span id="3">显示内容3</span><br>
<input type="button" id="btndown" onclick="display('4')" value="4"/>
<span id="4">显示内容4</span><br>
<input type="button" id="btndown" onclick="display('5')" value="5"/>
<span id="5">显示内容5</span><br>
<input type="button" id="btndown" onclick="display('6')" value="6"/>
<span id="6">显示内容6</span><br>
<input type="button" id="btndown" onclick="display('7')" value="7"/>
<span id="7">显示内容7</span><br>
<input type="button" id="btndown" onclick="display('8')" value="8"/>
<span id="8">显示内容8</span><br>
<input type="button" id="btndown" onclick="display('9')" value="9"/>
<span id="9">显示内容9</span><br>
<input type="button" id="btndown" onclick="display('10')" value="10"/>
<span id="10">显示内容10</span></td>
</td>
</tr>
</table> 展开
2个回答
展开全部
添加body.onkeydown事件，不能写在<body>前面。
var nowId = 0;
document.body.onkeydown = function() {
if (event.keyCode == 38 && nowId > 0) {
display(nowId--);
} else if (event.keyCode == 40 && nowId < 10) {
display(++nowId);
}
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
