Tipps zum Realisieren der Spaltenanzeige mit javascript

Tipps zum Realisieren der Spaltenanzeige mit javascript_javascript-Tipps

WBOY

Freigeben： 2016-05-16 16:34:06

Original

1388 Leute haben es durchsucht

Ich erinnere mich, als ich das Prüfungssystem für meine älteren Kommilitonen testete, sah ich, dass auf deren Prüfungsseite die Kandidateninformationen auf der linken Seite ausgeblendet werden konnten. Damals fand ich es so fortschrittlich und benutzerfreundlich. Nachdem ich JavaScript gelernt habe, kann ich diese Funktion auch implementieren.

1. Seitengestaltung:

(1).html-Code:

<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>

Nach dem Login kopieren

(2). Beschreibung: Tatsächlich ist diese Seite sehr einfach, nur eine Tabelle mit einer Zeile und drei Spalten. Der erste Teil enthält den Spaltennamen und der dritte Teil ist der Hauptinhalt. Es gibt ein Bild des linken (rechten) Pfeils im mittleren Teil. Ich habe vorher zu viel nachgedacht und dachte, es sei eine sehr coole Steuerung.

2.Javascript-Code:

<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>

Nach dem Login kopieren

(1) Wirkung:

(2) Hinweis: Der „Linkspfeil“ wird zunächst angezeigt. Wenn Sie auf das Bild klicken, wird auf das Ereignis hide() reagiert, die Spalte wird teilweise ausgeblendet und der Linkspfeil wird in einen Rechtspfeil geändert. Wenn Sie auf den „Rechtspfeil“ klicken, reagiert er auf das Ereignis show (), zeigt den ausgeblendeten Spaltenteil an und ändert gleichzeitig den Rechtspfeil in den Linkspfeil, wodurch der ursprüngliche Zustand wiederhergestellt wird. Es ist eigentlich sehr einfach zu sagen und leicht umzusetzen.

In dieser Phase des Javascript-Lernens fühlt es sich sehr interessant an. Wenn ich vorher nichts wusste, war es immer schwierig, darüber nachzudenken und mich selbst psychologisch unter Druck zu setzen. Als ich es persönlich erlebte, stellte ich fest, dass es genau das war, und langsam entwickelte ich mein Interesse am Lernen. Wenn Sie sich jetzt auf einer Website anmelden oder eine Software verwenden, müssen Sie unbedingt darüber nachdenken, wie sie implementiert ist, was gut gemacht ist und was verbessert werden muss, um nach und nach einem Profi näher zu kommen.

Es gibt noch viel zu lernen über JavaScript. Was ich heute gezeigt habe, ist nur die Spitze des Eisbergs. Machen Sie weiter mit Interesse und Neugier.