Html + JS: Click the corresponding button to choose whether to hide or show (user reply function)

For example:

When I click on the button 1 o'clock, click on the first to show this is comment 01, click the second below to hide this is comment 01

When I click on the button 2 o'clock, click on the first to show this is Comment 02, click the second below to hide this is comment 02

When I click on the button 3 o'clock, click on the first to show this is comment 03, click the second below to hide this is comment 03

Note: Different button clicks will also show different data

　　Use the scene: according to different message information, click the "Reply" button, pop up the corresponding reply box

Instance:

　　

Code:

　　

<ahref= "javascript:"onclick= "Show (0)">01</a><Pclass= "Content3"style= "Display:none">This is comment 01</P><ahref= "javascript:"onclick= "Show (1)">02</a><Pclass= "Content3"style= "Display:none">This is comment 02</P><ahref= "javascript:"onclick= "Show (2)">03</a><Pclass= "Content3"style= "Display:none">This is comment 03</P><Script>functionShow (num) {varcontent=Document.getelementsbyclassname ('Content3'); //getelementsbyclassname get the array formcontent=Content[num];//get one of the members of the array, return an object (P tag Element)        //if the Diplay state in the object is None    if(Content.style.display=="None") {        //modifies the object's Diplay property to block for displayContent.style.display="Block"; } Else{        //Otherwise, modify to none to hideContent.style.display="None"; }       //Console.log (content);     }</Script>

Effect:

(1) before operation :

　　

(2) after clicking "Button 1" only :

(2) after clicking "Button 2" only :

(3) after clicking "Button 1" and "button 2" :

　　

(4) Click "Button 1" two times, click "Button 2" once :

Question: How does the button and the content relate?

Reply:

A tag has the onclick attribute

There are show (0) this JavaScript code

Show (0) is the function that runs show (), and then pass in 0 as the parameter

So far,<a> and <p> are not related

<a> only knows to run a JavaScript function when clicked

and <p>, all defined inside the function.

For example, line 13 is to get all relevant <p> with ClassName, and then 14 lines, select one in multiple <p>, that is, content = Content[num] , so they associate

The above is my summary, for the answer to my friend tribute to thank you!

END

Html + JS: Click the corresponding button to choose whether to hide or show (user reply function)