recherche

Maison >interface Web >js tutoriel >Astuces pour réaliser l'affichage des colonnes avec les astuces javascript_javascript

Astuces pour réaliser l'affichage des colonnes avec les astuces javascript_javascript

WBOY
WBOYoriginal
2016-05-16 16:34:061384parcourir

Je me souviens que lorsque je testais le système d'examen pour mes camarades seniors, j'ai vu que leur page d'examen pouvait cacher les informations sur les candidats sur la gauche, je pensais que c'était tellement avancé et convivial. Maintenant que j'ai appris JavaScript, je peux également implémenter cette fonction. Laissez-moi la montrer.

1. Conception des pages :

(1).code 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). Description : En fait, cette page est très simple, juste un tableau avec une ligne et trois colonnes. La première partie contient le nom de la colonne et la troisième partie est le contenu principal. Il y a une image de la flèche gauche (droite) dans la partie centrale. J'ai trop réfléchi avant et j'ai trouvé que c'était un contrôle très cool.

2.code 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) Effet :

(2) Remarque : La "flèche gauche" est initialement affichée. Cliquer sur l'image répondra à l'événement hide(), masquant partiellement la colonne et changeant la flèche gauche en flèche droite. Lorsque vous cliquez sur la "flèche droite", il répondra à l'événement show(), affichera la partie de colonne cachée et en même temps changera la flèche droite en flèche gauche, revenant à l'état d'origine. C’est en fait très simple à dire et facile à faire.

À travers cette étape d’apprentissage du javascript, cela semble très intéressant. Quand je ne savais rien auparavant, il était toujours difficile d'y penser et de me mettre une pression psychologique. Lorsque j'en ai fait l'expérience personnellement, j'ai découvert que c'était juste cela et j'ai lentement développé mon intérêt pour l'apprentissage. Désormais, lorsque vous vous connectez à un site Web ou utilisez un logiciel, vous ne pouvez vous empêcher de réfléchir à la manière dont il est mis en œuvre, à ce qui est bien fait et à ce qui doit être amélioré, en vous rapprochant progressivement d'un professionnel.

Il y a encore beaucoup à apprendre sur JavaScript. Ce que j'ai montré aujourd'hui n'est que la pointe de l'iceberg. Continuez avec intérêt et curiosité !

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Un exemple d'implémentation récursive JavaScript des compétences de tableau d'inversion string_javascriptArticle suivant：Un exemple d'implémentation récursive JavaScript des compétences de tableau d'inversion string_javascript

Articles Liés

Voir plus