Home > Developer > Web Develop
Practical Tips for javascript-implement column-based display and javascript column-based display
I remember that when I tested the examination system for my brother and sister, I saw that their examination page could hide the information of the left-side examinee. At that time, I felt that the examination page was very big and user-friendly. Now that I have learned javascript, I can also implement this function. Let's take a look at it.
1. Page design:
(1).html code:
<Title> js partition </title> <style type = "text/css">. alignment {text-align: center ;}</style>
(2). Description:In fact, this page is very simple. You only need a table with one row and three columns. The first part is the topic name, and the third part is the main content. Put a picture of the left (right) arrow in the middle. I thought it was a good control.
2. javascript code:
<Script language = "javascript" type = "text/javascript"> function hide () // click the left arrow to hide the column section {// Step 1: hide the column list document. getElementById ("lanmu "). style. display = "none"; // Step 2: Change the arrow image at the same time. The event returned by the left arrow is show () document. getElementById ("pic "). innerHTML = " ";} function show () // click the right arrow to display the hidden section {// Step 1: show the topic list document. getElementById ("lanmu "). style. display = ""; // Step 2: Change the arrow image at the same time. The event returned by the left arrow is to hide the hide () document. getElementById ("pic "). innerHTML = " ";}</script>
(1) effect:
(2) Description:The "left arrow" is initially displayed. clicking an image will respond to the hide () event, hide the section, and change the left arrow to the right arrow. When you click the "right arrow", the show () event is returned, showing the hidden section. At the same time, the right arrow is changed to the left arrow, and then returns to the initial state. This is actually very simple and easy to do.
It is interesting to learn javascript at this stage. When I don't know anything before, I always think hard and give myself psychological pressure. When I experience it myself, I find that it is the same thing, gradually cultivate interest in learning. When you log on to a website or use a software, you may unconsciously consider how it is implemented, where it is done well, where it needs improvement, and gradually approaching a professional.
There are still many things to learn about javascript. Today, the tip of the iceberg is displayed. Continue to cheer with your interest and curiosity!
Difficult challenge: html javascript css can be implemented similar to word column sharding
This is not in the WORD or wpstext category, right?
Questions are displayed in the left/right column of the webpage.
<Html>
<Head>
<Title> test page </title>
<Script language = "javascript" type = "text/javascript">
Function testfunction ()
{
Document. getElementById ('right'). innerHTML = document. getElementById ('key'). value;
}
</Script>
</Head>
<Body>
<Div id = "left" style = "float: left; width: 300px; border: 1px solid gray; height: 100px;">
<Input type = "text" id = "key"/>
<Input type = "button" onclick = "testfunction ()" value = "test"/>
</Div>
<Div id = "right" style = "float: left; width: 300px; border: 1px solid gray; margin-left: 10px; height: 100px;">
</Div>
<Div style = "clear: both"> </div>
</Body>
</Html>
The result of a left-click and right-click Change is implemented. You can also use iframe as a tag.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
