ホームページ > 記事 > ウェブフロントエンド > javascript_javascripttipsでカラム表示を実現するためのヒント
javascript_javascripttipsでカラム表示を実現するためのヒント
- WBOYオリジナル
- 2016-05-16 16:34:061362ブラウズ
先輩の学生のために試験システムをテストしていたとき、試験ページで左側の受験者情報を非表示にできるのを見て、その時はとても先進的で使いやすいと思いました。 JavaScript を学習したので、この関数を実装することもできます。
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). 説明: 実際、このページは非常に単純で、1 行 3 列の表だけです。最初の部分には列名が含まれ、3 番目の部分はメインのコンテンツです。真ん中の部分に左（右）矢印の絵がありますが、前に考えすぎて、非常にクールなコントロールだと思いました。
2.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 を学習するこの段階を通して、とても面白く感じます。何も知らないときは、考えるのが大変で、精神的にプレッシャーを感じていましたが、実際に体験してみると、まさにその通りだと気づき、少しずつ学ぶことに興味が湧いてきました。今では、Web サイトにログインしたり、ソフトウェアを使用したりするときに、それがどのように実装されているか、何がうまく機能し、何が改善されるべきかを考えずにはいられなくなり、徐々にプロフェッショナルに近づいてきます。
JavaScript については学ぶべきことがまだたくさんあります。今日紹介したのはほんの氷山の一角です。興味と好奇心を持って続けてください。