search

Home >Web Front-end >JS Tutorial >Tips for realizing column display with javascript_javascript tips

Tips for realizing column display with javascript_javascript tips

WBOY
WBOYOriginal
2016-05-16 16:34:061384browse

I remember when I was testing the exam system for my senior fellow students, I saw that their exam page could hide the candidate information on the left. At that time, I thought it was so advanced and user-friendly. Now that I have learned JavaScript, I can also implement this function. Let me show it off.

1. Page design:

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

(2). Description: In fact, this page is very simple, just a table with one row and three columns. The first part contains the column name, and the third part is the main content. There is a picture of the left (right) arrow in the middle part. I thought too much before and thought it was a very cool control.

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>

(1) Effect:

(2) Note: The "left arrow" is initially displayed. Clicking on the image will respond to the hide() event, partially hiding the column, and changing the left arrow to the right arrow. When the "right arrow" is clicked, it will respond to the show() event, display the hidden column part, and at the same time change the right arrow to the left arrow, returning to the original state. It’s actually very simple to say and easy to do.

Through this stage of learning javascript, it feels very interesting. When I didn't know anything before, it was always difficult to think about it and put psychological pressure on myself. When I experienced it personally, I found that it was just that, and I slowly developed my interest in learning. Now when you log into a website or use a piece of software, you can't help but think about how it is implemented, what is done well, and what needs to be improved, gradually becoming closer to a professional.

There is still a lot to learn about JavaScript. What I showed today is just the tip of the iceberg. Keep going with interest and curiosity!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：An example of JavaScript recursive implementation of reversing array string_javascript skillsNext article：An example of JavaScript recursive implementation of reversing array string_javascript skills

Related articles

See more