(Prototype team page) |
|||
Line 1: | Line 1: | ||
− | + | <!DOCTYPE > | |
<html> | <html> | ||
− | < | + | <head> |
+ | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | ||
+ | <link rel="stylesheet" href="https://2018.igem.org/Template:TJU_China/default_CSS?action=raw&ctype=text/css" type="text/css"> | ||
+ | <link rel="stylesheet" href="https://2018.igem.org/Template:TJU_China/nav_css?action=raw&ctype=text/css" type="text/css"> | ||
+ | <title>home</title> | ||
+ | <style> | ||
+ | .main_word { | ||
+ | text-align: left; | ||
+ | font-size: 20px; | ||
+ | margin-top: 50px; | ||
+ | line-height: 1.5; | ||
+ | } | ||
− | |||
− | |||
− | + | .pic { | |
− | + | width: 80%; | |
− | + | margin-left: 10%; | |
+ | margin-top: 100px; | ||
+ | } | ||
− | + | .pic img { | |
+ | width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | .pic_explanation { | ||
+ | font-size: 20px; | ||
+ | margin-top: 20px; | ||
+ | text-align: left; | ||
+ | margin-left: 10%; | ||
+ | } | ||
+ | .empty { | ||
+ | height: 100px; | ||
+ | } | ||
− | + | button:hover { | |
− | + | opacity: 0.8; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .first_button { | |
+ | float: left; | ||
+ | margin-left: 21%; | ||
+ | width: 5%; | ||
+ | } | ||
− | + | .first_button_list { | |
− | + | margin-top: 100px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | .first_button button { | ||
+ | background: #4e72b8; | ||
+ | color: #eeeeee; | ||
+ | line-height: 1.5; | ||
+ | font-size: 30px; | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | height: 50px; | ||
+ | border: solid #4e72b8 2px; | ||
+ | border-radius: 10px; | ||
+ | outline: none; | ||
+ | padding-left: 20px; | ||
+ | padding-right: 20px; | ||
− | + | } | |
+ | .second_button button { | ||
+ | background: #4e72b8; | ||
+ | color: #eeeeee; | ||
+ | line-height: 1.5; | ||
+ | font-size: 25px; | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | margin-top: 50px; | ||
+ | padding-left: 20px; | ||
+ | padding-right: 20px; | ||
+ | width: 250px; | ||
+ | border: solid #4e72b8 2px; | ||
+ | outline: none; | ||
+ | } | ||
+ | |||
+ | .group { | ||
+ | clear: both; | ||
+ | margin-top: 100px; | ||
+ | margin-left: 10%; | ||
+ | width: 80%; | ||
+ | } | ||
+ | |||
+ | .arrow { | ||
+ | z-index: 4; | ||
+ | width: 100px; | ||
+ | position: absolute; | ||
+ | top: 130px; | ||
+ | margin-top: 450px; | ||
+ | margin-left: 49%; | ||
+ | /* animation: arrow_move 1.5s infinite; */ | ||
+ | -webkit-animation: arrow_move 1.5s infinite; | ||
+ | } | ||
+ | |||
+ | .arrow img { | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | @keyframes arrow_move { | ||
+ | 0% { | ||
+ | top: 130px; | ||
+ | } | ||
+ | 60% { | ||
+ | top: 170px; | ||
+ | } | ||
+ | 100% { | ||
+ | top: 130px; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | #fromArrow { | ||
+ | z-index: 5; | ||
+ | position: absolute; | ||
+ | margin-top: -64px; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
+ | </head> | ||
+ | |||
+ | <body style="background:#eeeeee;"> | ||
+ | <div class="nav"> | ||
+ | <div class="logo"> | ||
+ | <img class="logo_picture" src="https://static.igem.org/mediawiki/2018/f/f7/T--TJU_China--TJU_China.png"> | ||
+ | </div> | ||
+ | <ul style="margin-left:80px;" class="main"> | ||
+ | <li> | ||
+ | <div class="nav_logo_pic" style="width:24px;height:24px;margin-top:13px;"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/3/37/T--TJU_China--home.png"> | ||
+ | </div> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China">Home</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <div class="nav_logo_pic"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/9/91/T--TJU_China--project.png"> | ||
+ | </div> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Description"> | ||
+ | Project | ||
+ | </a> | ||
+ | <ul class="drop menu1"> | ||
+ | <li> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Description">Description</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Experiments">Experiments</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Notebook">Notebook</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Demonstrate">Demonstrate</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | |||
+ | </li> | ||
+ | <li> | ||
+ | |||
+ | <div class="nav_logo_pic"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/0/0b/T--TJU_China--parts.png"> | ||
+ | </div> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Parts"> | ||
+ | Parts | ||
+ | </a> | ||
+ | <ul class="drop menu2"> | ||
+ | <li> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Parts">Parts Overview</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Basic_Part">Basic</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Composite_Part">Composite</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Part_Collection">Collection</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Improve">Improve</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <div class="nav_logo_pic"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/5/57/T--TJU_China--drylab.png"> | ||
+ | </div> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Dynamic_Model">Model</a> | ||
+ | <ul class="drop menu4"> | ||
+ | <li> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Model/Dynamic_Model">Dynamic Model of Biosensor</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Model/Off_target_Model">Off-target Model</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Model/Code">Code</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <div class="nav_logo_pic"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/e/ea/T--TJU_China--hp.png"> | ||
+ | </div> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Human_Practices"> | ||
+ | HP | ||
+ | </a> | ||
+ | <ul class="drop menu5"> | ||
+ | <li> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Silver">Silver</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Human_Practices">Integrated HP</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Public_Engagement">Education& Engagement</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Gallery">Gallery</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <div class="nav_logo_pic"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/0/01/T--TJU_China--team.png"> | ||
+ | </div> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Team"> | ||
+ | Team | ||
+ | </a> | ||
+ | <ul class="drop menu7"> | ||
+ | <li style="list-style-type: none;"> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Team">Members</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Collaborations">Collaboration</a> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="https://2018.igem.org/Team:TJU_China/Attributions">Attribution</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | |||
+ | </ul> | ||
+ | |||
+ | </div> | ||
+ | <div style=" margin-top:28px;z-index:10; border-top: solid #4e72b8 2px;width: 100%; position: fixed;"></div> | ||
+ | |||
+ | <div> | ||
+ | <img style="width: 100%;margin-top:50px;" src="https://static.igem.org/mediawiki/2018/3/39/T--TJU_China--experiment_main.jpg"> | ||
+ | </div> | ||
+ | <div class="arrow"> | ||
+ | <a href="#fromArrow"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/e/e9/T--TJU_China--double_arrow.png"> | ||
+ | </a> | ||
+ | |||
+ | </div> | ||
+ | <div id="fromArrow"></div> | ||
+ | |||
+ | <div class="first_button_list"> | ||
+ | <div class="first_button"> | ||
+ | <button id="btn11">Group1</button> | ||
+ | </div> | ||
+ | <div class="first_button"> | ||
+ | <button id="btn12">Group2</button> | ||
+ | </div> | ||
+ | <div class="first_button"> | ||
+ | <button id="btn13">Group3</button> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="group" id="group1" style="display:none;"> | ||
+ | <div class="second_button" style="padding-top:50px;"> | ||
+ | <button id="btn211">Conversion</button> | ||
+ | </div> | ||
+ | <div class="main_word" id="w211" style="display:none;margin-top:50px;"> | ||
+ | <div style="font-size:30px;color:#4e72b8;font-weight:bold;">Conversion</div> | ||
+ | <div style="margin-top:20px;"> | ||
+ | 1. Wipe the cleaned work area with 70% ethanol. | ||
+ | <br>2. Thaw the competent cells on ice. A 1.5 mL microcentrifuge tube was labeled for each transformation and | ||
+ | the tube was placed on ice for pre-cooling. . | ||
+ | <br>3. Rotate the DNA tube from the Competent Cell Test Kit/Conversion Efficiency Kit and collect all DNA to | ||
+ | the bottom of each tube before use. A quick spin of 20-30 seconds at 8,000-10,000 rpm is sufficient. Note: | ||
+ | You should resuspend the DNA in each tube with 50 μL of dH2O. | ||
+ | <br>4. Inhale 1 μL of DNA into each microcentrifuge tube. | ||
+ | <br>5. Pipette 50 μL of competent cells into each tube. Gently mix the tube with your fingers. | ||
+ | <br>6. Incubate on ice for 30 minutes. | ||
+ | <br>Now preheat the bath to 42 °C. | ||
+ | <br>7. Heat the cells by placing in a water bath for 90 seconds. Carefully keep the lid of the tube above the | ||
+ | water level and keep the ice close. | ||
+ | <br>8. Immediately transfer the tube back to the ice and incubate on ice for 5 minutes. | ||
+ | <br>9. Add 950 μL of SOC medium to each tube, incubate at 37 ° C for 1 hour, and shake at 200-300 rpm. | ||
+ | <br>10. Pipette 100 μL from each tube onto the appropriate plate and spread the mixture evenly over the plate. | ||
+ | Incubate overnight at 37 ° C or for about 16 hours. Place the plate with the agar side on top and the lid | ||
+ | on the bottom. | ||
+ | </div> | ||
+ | <div style="font-size:25px;color:#4e72b8;font-weight:bold;margin-top:50px;">Kit DNA conversion</div> | ||
+ | <div style="margin-top:20px;"> | ||
+ | 1. Using a pipette tip, make a hole in the foil cover and enter the corresponding hole in the part. Make sure the board is | ||
+ | oriented correctly. Do not remove the foil cover as it may cause cross-contamination between the holes. | ||
+ | <br>2. Pipette 10 μL of dH2O (distilled water) into the wells. Pipette up and down several times and let stand | ||
+ | for 5 minutes to ensure that the dried DNA is completely resuspended. The resuspension will be red because | ||
+ | the dried DNA has a cresol red dye. We recommend that you do not resuspend dry DNA with TE. | ||
+ | <br>3. Convert 1 μL of resuspended DNA to the competent cells you want, transform your transformation with the | ||
+ | appropriate antibiotic* and grow overnight. | ||
+ | <br>4. Pick a colony and inoculate the broth (using the correct antibiotic again) and grow for 16 hours. | ||
+ | <br>5. Using the resulting culture, make a small amount of DNA to make your own glycerol stock (further instructions | ||
+ | on making glycerin see this page). We recommend using QC testing of micro-prepared DNA, such as restriction | ||
+ | digestion and sequencing. | ||
+ | </div> | ||
+ | <div style="font-size:25px;color:#4e72b8;font-weight:bold;margin-top:50px;">PCR</div> | ||
+ | <div> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/8/85/T--TJU_China--smURFP.png"> | ||
+ | </div> | ||
+ | <div> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/5/5a/T--TJU_China--ArsR.png"> | ||
+ | </div> | ||
+ | <div> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/6/6c/T--TJU_China--ArsR1.png"> | ||
+ | </div> | ||
+ | <div> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/0/0f/T--TJU_China--ArsR1_smURFP.png"> | ||
+ | </div> | ||
+ | <div> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/4/4d/T--TJU_China--ArsR_andArsR1_smURFP.png"> | ||
+ | </div> | ||
+ | <div> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/4/41/T--TJU_China--completed.png"> | ||
+ | </div> | ||
+ | |||
+ | <div style="font-size:25px;color:#4e72b8;font-weight:bold;margin-top:50px;">Single enzyme digestion</div> | ||
+ | <div style="margin-top:20px;"> Take 1 ng of the verified plasmid, add BμI 1 μL, buffer 0.5 μL, add ddHO to 50 μL, place in a 37 ° C water bath | ||
+ | for 1 h, then put in a 65 ° C water bath for 20 min, take out and run the gel verification. | ||
+ | <br>connection: | ||
+ | <br> First add a large fragment of 25ng, a small fragment of 1μM, 0.2μL (small fragment is pre-annealed by two | ||
+ | complementary single-stranded oligonucleotides in a water bath in a boiling water beaker, slowly reduced | ||
+ | to room temperature), then add T4 ligase 1μL 1 μL of its buffer, add ddHO to 20 μL, place in ice water and | ||
+ | mix to 22 ° C in a thermos bucket, and connect overnight. | ||
+ | <br>Double digestion: | ||
+ | <br> Add 1 ul of enzyme, add 1 ng (or 2 ng) of plasmid, add buffer, then hydrate, 30 ul system. 37 ° C 40min | ||
+ | (time can be changed) 80 ° C 5min fire</div> | ||
+ | </div> | ||
+ | |||
+ | <div class="second_button"> | ||
+ | <button id="btn212">Extraction of the amplified plasmid</button> | ||
+ | </div> | ||
+ | <div class="main_word" id="w212" style="display:none;margin-top:50px;"> | ||
+ | <div style="font-size:30px;color:#4e72b8;font-weight:bold;">Extraction of the amplified plasmid from the cultured Escherichia coli using TIANprep Mini Plasmid Kit( #DP103, | ||
+ | TIANgen) | ||
+ | </div> | ||
+ | <div style="margin-top:20px;">1. Collect the E. coli solution into the EP tube. | ||
+ | <br>2. Re-suspend pelleted bacterial cells in 250ul Buffer P1 (RNase A added, kept at 4 °C) and mix thoroughly. | ||
+ | <br>3. Add Buffer 250ul P2 and gently invert the tube 6-8 times to mix. | ||
+ | <br>4. Add 350μl Buffer P3 and invert the tube immediately and gently 6-8 times. | ||
+ | <br>5. Centrifuge for 10 min at 12,000 rpm in a micro-centrifuge. | ||
+ | <br>6. Regenerate column CP3 while centrifugation. Add 500μl Buffer BL. Centrifuge for 1 min at 12,000 rpm after | ||
+ | static for 2min. Discard the flow-through. | ||
+ | <br>7. Add supernatant from the EP tube to the column and put it into collection canals. Centrifuge for 1min | ||
+ | at 12000rpm. Discard the flow-through. | ||
+ | <br>8. Add 600μl Buffer PW(ethanol added) and centrifuge for 1min after static for 2min. Discard the flow-through. | ||
+ | <br>9. Repeat step 8. | ||
+ | <br>10. Centrifuging for 2min at 12000rpm to shake off the rest of the Buffer PW. | ||
+ | <br>11. Place the column in a new EP tube and the opening was allowed to stand for 5 minutes, so that the ethanol | ||
+ | in the PW can be sufficiently volatilized. | ||
+ | <br>12. Add 70 ul sterile distilled water at 75℃ dropwise to the middle of the adsorbed film. Static for 2min. | ||
+ | Then centrifuge for 2 min at 12,000 rpm to collect DNA solution in EP tube.</div> | ||
+ | </div> | ||
+ | |||
+ | <div class="second_button"> | ||
+ | <button id="btn213">Agarose Gel Electrophoresis</button> | ||
+ | </div> | ||
+ | <div class="main_word" id="w213" style="display:none;margin-top:50px;"> | ||
+ | <div style="font-size:30px;color:#4e72b8;font-weight:bold;">Agarose Gel Electrophoresis (Plasmid & PCR & Cleavage product) </div> | ||
+ | <div style="margin-top:20px;">1. Prepare sufficient lx TAE to fill the electrophoresis tank and to cast the gel. | ||
+ | <br>2. Prepare a solution of agarose in electrophoresis buffer at a concentration of 1%: Add 0.9g powdered agarose | ||
+ | to 90ml of TAE in an Erlenmeyer flask. | ||
+ | <br>3. Heat the slurry in a boiling-water bath or a microwave oven until the agarose dissolves. | ||
+ | <br>4. Use insulated gloves or tongs to transfer the flask/bottle into a water bath at 55°C. When the molten | ||
+ | gel has cooled, add ethidium bromide to a final concentration of 0.5 ug/ml. Mix the gel solution thoroughly | ||
+ | by gentle swirling. | ||
+ | <br>5. While the agarose solution is cooling, choose an appropriate comb for forming the sample slots in the | ||
+ | gel. Position the comb 0.5-1.0 mm above the plate so that a complete well is formed when the agarose is added | ||
+ | to the mold. | ||
+ | <br>6. Pour the warm agarose solution into the mold. | ||
+ | <br>7. Allow the gel to set completely (30-45 minutes at room temperature), then carefully remove the comb. Pour | ||
+ | off the electrophoresis buffer and carefully remove the tape Mount the gel in the electrophoresis tank. | ||
+ | <br>8. Add just enough electrophoresis buffer to cover the gel to a depth of ~1 mm. | ||
+ | <br>9. Mix the samples of DNA with 10 ul green buffer | ||
+ | <br>10. Slowly load the sample mixture into the slots of the submerged gel using a disposable micropipette, an | ||
+ | automatic micro-pipettor. Load size standards into slots on both the right and left sides of the gel. | ||
+ | <br>11. Close the lid of the gel tank and attach the electrical leads so that the DNA will migrate toward the | ||
+ | positive anode (red lead). Apply a voltage of 1-5 V/cm (measured as the distance between the positive and | ||
+ | negative electrodes). If the leads have been attached correctly, bubbles should be generated at the anode | ||
+ | and cathode (due to electrolysis), and within a few minutes, the bromophenol blue should migrate from the | ||
+ | wells into the body of the gel. Run the gel until the bromophenol blue and xylene cyanol FF have migrated | ||
+ | an appropriate distance through the gel. | ||
+ | <br>12. When the DNA samples or dyes have migrated a sufficient distance through the gel, turn off the electric | ||
+ | current and remove the leads and lid from the gel tank.</div> | ||
+ | </div> | ||
+ | |||
+ | <div class="second_button"> | ||
+ | <button id="btn214">Gel Extraction purification</button> | ||
+ | </div> | ||
+ | <div class="main_word" id="w214" style="display:none;margin-top:50px;"> | ||
+ | <div style="font-size:30px;color:#4e72b8;font-weight:bold;">Gel Extraction purification using TIANgen Midi Purification Kit (#DP209, TIANGEN)</div> | ||
+ | <div style="margin-top:20px;">1.Column equilibrium: add 500 μl equilibrium liquid BL to the adsorption column CA2 (the adsorption column into | ||
+ | the collection tube) , centrifuge for 1 min at 12,000 rpm in a micro-centrifuge. Then pour out the waste | ||
+ | liquid from the collection tube, and put the adsorption column back into the collection tube. | ||
+ | <br>2.Cut a single DNA band from agarose gel and put it into a clean centrifuge tube to weigh. | ||
+ | <br>3.Add equal volume solution PN (if gel weight is 0.1 g, add 100ul PN solution), water bath at 50 ℃, during | ||
+ | which the EP tube is continuously flipped mildly up and down to ensure the full dissolution of the gel. If | ||
+ | there are still undissolved rubber pieces, keep them for a few minutes or add some more sol solution until | ||
+ | the block is completely dissolved. | ||
+ | <br>4.The solution obtained from the previous step was added to column CA2 (the column was placed in the collection | ||
+ | tube), incubate at room temperature for 2 mins, then centrifuge for 1 min at 12,000 rpm in a micro-centrifuge. | ||
+ | Discard the flow-through and put the adsorption column CA2 into the collection tube. | ||
+ | <br>5.Adding 600 μl PW(ethanol added) to the adsorption column CA2, then centrifuge for 1 min at 12,000 rpm in | ||
+ | a micro-centrifuge. Discard the flow-through and put the adsorption column CA2 into the collection tube. | ||
+ | <br>6.Repeat step 5. | ||
+ | <br>7.Put the adsorption column CA2 back into the collecting tube, then centrifuge for 2 min at 12,000 rpm in | ||
+ | a micro-centrifuge in order to remove the rinsing solution as much as possible. The adsorption column CA2 | ||
+ | was then placed at room temperature for a few minutes and dried thoroughly to prevent the residual rinsing | ||
+ | solution from affecting the next step. | ||
+ | <br>8.Place the adsorption column CA2 in a clean EP tube, add 40-50ul double distilled water (pH 7.0-8.5) to | ||
+ | the middle of the adsorption membrane, incubate at room temperature for 2 mins. Then centrifuge for 2 min | ||
+ | at 12,000 rpm in a micro-centrifuge to collect DNA solution.</div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="group" id="group2" style="display:none;"> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="group" id="group3" style="display:none;"> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | |||
+ | <script> | ||
+ | window.onload = function () { | ||
+ | var btn11 = document.getElementById("btn11"); | ||
+ | var div1 = document.getElementById("group1"); | ||
+ | btn11.onclick = function () { | ||
+ | if (div1.style.display == 'none') { | ||
+ | div1.style.display = 'block'; | ||
+ | } | ||
+ | else { | ||
+ | div1.style.display = 'none'; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | var btn12 = document.getElementById("btn12"); | ||
+ | var div2 = document.getElementById("group2"); | ||
+ | btn12.onclick = function () { | ||
+ | if (div2.style.display == 'none') { | ||
+ | div2.style.display = 'block'; | ||
+ | } | ||
+ | else { | ||
+ | div2.style.display = 'none'; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | var btn13 = document.getElementById("btn13"); | ||
+ | var div3 = document.getElementById("group3"); | ||
+ | btn13.onclick = function () { | ||
+ | if (div3.style.display == 'none') { | ||
+ | div3.style.display = 'block'; | ||
+ | } | ||
+ | else { | ||
+ | div3.style.display = 'none'; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | var btn211 = document.getElementById("btn211"); | ||
+ | var w211 = document.getElementById("w211"); | ||
+ | btn211.onclick = function () { | ||
+ | if (w211.style.display == 'none') { | ||
+ | w211.style.display = 'block'; | ||
+ | } | ||
+ | else { | ||
+ | w211.style.display = 'none'; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | var btn212 = document.getElementById("btn212"); | ||
+ | var w212 = document.getElementById("w212"); | ||
+ | btn212.onclick = function () { | ||
+ | if (w212.style.display == 'none') { | ||
+ | w212.style.display = 'block'; | ||
+ | } | ||
+ | else { | ||
+ | w212.style.display = 'none'; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | var btn213 = document.getElementById("btn213"); | ||
+ | var w213 = document.getElementById("w213"); | ||
+ | btn213.onclick = function () { | ||
+ | if (w213.style.display == 'none') { | ||
+ | w213.style.display = 'block'; | ||
+ | } | ||
+ | else { | ||
+ | w213.style.display = 'none'; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | var btn214 = document.getElementById("btn214"); | ||
+ | var w214 = document.getElementById("w214"); | ||
+ | btn214.onclick = function () { | ||
+ | if (w214.style.display == 'none') { | ||
+ | w214.style.display = 'block'; | ||
+ | } | ||
+ | else { | ||
+ | w214.style.display = 'none'; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | } | ||
+ | </script> | ||
+ | </body> | ||
</html> | </html> |
Revision as of 03:25, 16 October 2018
<!DOCTYPE >