本文介绍如何使用JavaScript实现网页左侧栏的隐藏与显示功能。通过监听图片点击事件，动态修改DOM元素的display属性及innerHTML，实现栏目的收起与展开，并同步切换左右箭头图标。代码简洁，适合初学者理解基础的前端交互逻辑。
在协助师哥师姐测试考试系统时，注意到其考试页面具备隐藏左侧考生信息栏的功能，这种设计既专业又人性化。掌握JavaScript后，我也成功实现了类似效果，现分享具体实现过程。
页面HTML结构设计
1.页面设计：
(1).html代码：
<title>js分栏</title>
<style type="text/css">
.alignment{
text-align: center;
}
</style>
</head>
<script language="javascript" type="text/javascript">
//......
</script>
<body>
<table width="412" height="296" border="1">
<tr>
<td width="113" height="292" id="lanmu">
<p class="alignment"><a href="#">栏目一</a></p>
<p class="alignment"><a href="#">栏目二</a></p>
<p class="alignment"><a href="#">栏目三</a></p>
<p class="alignment"><a href="#">栏目四</a></p>
<p class="alignment"><a href="#">栏目五</a></p>
</td>
<td width="15">
<span id="pic"><img src="image/left.PNG" width="15" height="39" onclick="hide()" />
</span>
</td>
<td width="360" class="alignment">这里是内容区域！</td>
</tr>
</table>
</body>
</html> (2).说明：页面结构非常简洁，仅包含一个一行三列的表格。第一列用于展示栏目名称，第三列放置主要内容，中间列则放置一个左右箭头图片。此前误以为需要复杂控件，实则仅需简单图片即可实现。
2.javascript代码：
JavaScript交互逻辑实现
<script language="javascript" type="text/javascript">
function hide()//点击左箭头，隐藏栏目部分
{
//第一步：隐藏栏目列表
document.getElementById("lanmu").style.display="none";
//第二步：同时将箭头图片更换，左箭头响应的事件是显示show（）
document.getElementById("pic").innerHTML="<img src='image/right.PNG' onclick='show()' />";
}
function show()//点击右箭头，显示被隐藏的栏目部分
{
//第一步：显示栏目列表
document.getElementById("lanmu").style.display="";
//第二步：同时更换箭头图片，左箭头响应的事件是隐藏hide（）
document.getElementById("pic").innerHTML="<img src='image/left.PNG' onclick='hide()' />";
}
</script>
(1)效果：
(2)说明：初始状态下显示“左箭头”。点击该图片会触发hide()事件，隐藏栏目部分，并将左箭头替换为右箭头。当点击“右箭头”时，触发show()事件，重新显示被隐藏的栏目，同时将右箭头换回左箭头，恢复初始状态。整个过程逻辑简单，易于实现。
通过这一阶段javascript的学习，感觉很有趣味。在之前什么都不知道的情况下，总是想得很难，给自己心理压力，当亲身去经历的时候，发现也就那么回事儿，慢慢地培养了学习的兴趣。现在登录一个网站或者使用一个软件的时候，会不由自觉地考虑它是怎么实现的，哪儿做得好，哪儿需要改进，逐渐向一个专业人士靠近。
javascript要学习的东西还很多，今天展示的只是冰山一角，带着兴趣和好奇继续加油！