如何讓顯示一個頁面的內容，但點擊一個按鈕

我有有一些內容以及因此，一個編輯按鈕，當你點擊編輯按鈕，它會顯示在第二頁的頁面。我希望它好像只有一個頁面。它看起來像姓（文本區域被轉換成文本字段），請告訴我該怎麼辦呢的屏幕截圖是如何讓顯示一個頁面的內容，但點擊一個按鈕

和源代碼如下

<!DOCTYPE html> <!-- The new doctype --> 
<html> 
    <head> 

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

     <title>home</title> 

     <link rel="stylesheet" type="text/css" href="styles.css" /> 



    </head> 

    <body> 

     <section id="page" > <!-- Defining the #page section with the section tag --> 

      <header > <!-- Defining the header section of the page with the appropriate tag --> 

       <hgroup> 
        <h1>Your Logo</h1> 
        <h3>and a fancy slogan</h3> 
       </hgroup> 

       <nav class="clear"> <!-- The nav link semantically marks your main site navigation --> 
        <ul> 
         <li><a href="#article1">My Profile</a></li> 
         <li><a href="#article2">Change password</a></li> 
         <li><a href="#article3">Navigation Menu</a></li> 
        </ul> 
       </nav> 

      </header> 

      <section id="articles"> <!-- A new section with the articles --> 

       <!-- Article 1 start --> 

       <div class="line"></div> <!-- Dividing line --> 

       <article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. --> 
        <h2>Dr. Sukant Kumar nayak</h2> 

        <div class="line"></div> 

        <div class="articleBody clear"> 



        <div > 

     <div style="float: left; padding-left: 50px; padding-top: 5px"> 
      <table cellspacing="10" cellpadding="10" > 
      <tr> 
       <td width="200" height="30"> 
        <b>Last Name</b> 
       </td> 
       <td> 
        <label for="LastName">LastName</label> 
       </td> 
      </tr> 
      <tr> 
       <td height="30"> 
        <b>First Name</b> 
       </td> 
       <td> 
        <label for="FirstName">First Name</label> 
       </td> 
      </tr> 
      <tr> 
       <td height="30"> 
        <b>Date of Birth</b> 
       </td> 
       <td> 
        <label for="DateofBirth">Date of Birth</label> 
       </td> 
      </tr> 
      <tr> 
       <td height="30"> 
        <b>Qualification</b> 
       </td> 
       <td> 
        <label for="LastName">Qualification</label> 
       </td> 
      </tr> 
      <tr> 
       <td height="30"> 
        <b>Registration. No.</b> 
       </td> 
       <td> 
        <label for="RegistrationNo">Registration No</label> 
       </td> 
      </tr> 
      <tr> 
       <td height="30"> 
        <b>Country of Registration</b> 
       </td> 
       <td> 
        <label for="CountryofRegistration">Country of Registration</label> 
       </td> 
      </tr> 
      <tr> 
       <td height="30"> 
        <b>Practice Name</b> 
       </td> 
       <td> 
        <label for="PracticeName">Practice Name</label> 
       </td> 
      </tr> 
      <tr> 
       <td height="30"> 
        <b>Phone</b> 
       </td> 

       <td> 
        <label for="Phone">Phone</label> 
       </td> 
      </tr> 
      <tr> 
       <td height="30"> 
        <b>Email</b> 
       </td> 
       <td> 
        <label for="Email">Email</label> 
       </td> 
      </tr> 
<tr> 
       <td height="30"> 
        <b></b> 
       </td> 
       <td align="right" > 
        <label for="Email"><input type="submit" class="button button-submit" value="Edit" /></label> 
       </td> 
      </tr> 
     </table> 

     </div> 
     <div style="float: right;padding-right: 50px;padding-top: 50px"> 

      <table> 

       <tr> 
       <td width="160" height="30"> 
        <b>Address</b> 
       </td> 
       <td> 
        <label for="Address">Address</label> 
       </td> 
       </tr> 
       <tr> 
        <td height="30"> 
         <b>Street</b> 
        </td> 
        <td> 
         <label for="Street">Street</label> 
        </td> 
       </tr> 
       <tr> 
        <td height="30"> 
         <b>City</b> 
        </td> 
        <td> 
         <label for="City">City</label> 
        </td> 
       </tr> 
       <tr> 
        <td height="30"> 
         <b>State</b> 
        </td> 
        <td> 
         <label for="State">State</label> 
        </td> 
       </tr> 
       <tr> 
        <td height="30"> 
         <b>Country</b> 
        </td> 
        <td> 
         <label for="Country">Country</label> 
        </td> 
       </tr> 
       <tr> 
        <td height="30"> 
         <b>Pin Code</b> 
        </td> 
        <td> 
         <label for="PinCode">Pin Code</label> 
        </td> 
       </tr> 
       <tr> 
        <td height="30"> 
         <b>How do you know?</b> 
        </td> 
        <td> 
         <label for="HowDoYouKnow">How Do You Know</label> 
        </td> 
       </tr> 
       <tr> 
        <td height="30"> 
         <b>Comment</b> 
        </td> 

        <td> 
         <label for="Comments">Comments</label> 
        </td> 
       </tr> 
      </table><div align="center" style="padding-top: 30px"> 

     </div> 
     </div> 
     </div> 
        </div> 
       </article> 

       <!-- Article 1 end --> 


       <!-- Article 2 start --> 

       <div class="line"></div> 
       <div class="space"></div>    <div class="space"></div>    <div class="space"></div>    <div class="space"></div> 
<div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div> 
<div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div> 
       <article id="article2"> 
        <h2>Change Password</h2> 

        <div class="line"></div> 

        <div class="articleBody clear"> 
         <figure> 
          <img src="medical.jpg" width="620" height="440" /></a> 
         </figure> 

         <p><div align="center" style="padding-top: 30px"> 
      <table cellspacing="10" cellpadding="10"> 
       <tr> 
        <td width="200" height="30"><h5>Old Password</h5></td> 
        <td height="30"><input name="old" type="password"></td> 
       </tr> 
       <tr> 
        <td height="30"><h5>New Password</h5></td> 
        <td height="30"><input name="newPsw" type="password"></td> 
       </tr> 
       <tr> 
        <td height="30"><h5>Confirm Password</h5></td> 
        <td height="30"><input name="confirm" type="password"></td> 
       </tr> 
      </table> 
     </div> 
     <div class="footer-bar" align="center" style="padding-top: 30px"> 
      <table align="center" > 
       <tr > 
        <td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td> 
        <td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td> 
       </tr> 
      </table> 
     </div></p> 
         <p></p> 
        </div> 
       </article> 

       <!-- Article 2 end --> 

       <!-- Article 3 start --> 

       <div class="line"></div> 



       <!-- Article 3 end --> 


      </section> 

     <footer> <!-- Marking the footer section --> 

      <div class="line"></div> 

      <p>Copyright 2013 - mysite.com</p> 

      <a href="#" class="up">Go UP</a> 
      <a href="www.df.com" class="by">dh</a> 


     </footer> 

     </section> <!-- Closing the #page section --> 

     <!-- JavaScript Includes --> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     <script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script> 
     <script src="script.js"></script> 
    </body> 
</html>

當你點擊編輯按鈕的這個應該顯示

！[此處輸入圖像的描述] [2] 源代碼如下

<!DOCTYPE html> <!-- The new doctype --> 
<html> 
    <head> 

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

     <title>home</title> 

     <link rel="stylesheet" type="text/css" href="styles.css" /> 



    </head> 

    <body> 

     <section id="page" > <!-- Defining the #page section with the section tag --> 

      <header > <!-- Defining the header section of the page with the appropriate tag --> 

       <hgroup> 
        <h1>Your Logo</h1> 
        <h3>and a fancy slogan</h3> 
       </hgroup> 

       <nav class="clear"> <!-- The nav link semantically marks your main site navigation --> 
        <ul> 
         <li><a href="#article1">My Profile</a></li> 
         <li><a href="#article2">Change password</a></li> 
         <li><a href="#article3">Navigation Menu</a></li> 
        </ul> 
       </nav> 

      </header> 

      <section id="articles"> <!-- A new section with the articles --> 

       <!-- Article 1 start --> 

       <div class="line"></div> <!-- Dividing line --> 

       <article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. --> 
        <h2>Dr. Sukant Kumar nayak</h2> 

        <div class="line"></div> 

        <div class="articleBody clear"> 



        <div > 

     <div style="float: left; padding-left: 50px; padding-top: 50px"> 
      <table cellspacing="10" cellpadding="10" > 
      <tr> 
       <td width="200" height="30"> 
        <b>Last Name</b> 
        <p style="float:right; color: red ">* </p> 
       </td> 
       <td> 
        <input name="LastName" type="text" value="<%=lastName %>"/> 
       </td> 
      </tr> 
      <tr> 
       <td height="30"> 
        <b>First Name</b> 
        <p style="float:right; color: red ">* </p> 
       </td> 
       <td> 
        <input name="FirstName" type="text" value="<%=firstName %>" /> 
       </td> 
      </tr> 
      <tr> 
       <td height="30"> 
        <b>Date of Birth</b> 
       </td> 
       <td> 
        <input name="DateofBirth" type="text" value="<%=DOB %>" /> 
       </td> 
      </tr> 
      <tr> 
       <td height="30"> 
        <b>Qualification</b> 
       </td> 
       <td> 
        <input name="Qualification" type="text" value="<%=Qualification %>" /> 
       </td> 
      </tr> 
      <tr> 
       <td height="30"> 
        <b>Registration. No.</b> 
        <p style="float:right; color: red ">* </p> 
       </td> 
       <td> 
        <input name="RegistrationNo" type="text" value="<%=RegistrationNo %>"/> 
       </td> 
      </tr> 
      <tr> 
       <td height="30"> 
        <b>Country of Registration</b> 
       </td> 
       <td> 
        <input name="CountryofRegistration" type="text" value="<%=CountryOfRegistration %>" /> 
       </td> 
      </tr> 
      <tr> 
       <td height="30"> 
        <b>Practice Name</b> 
       </td> 
       <td> 
        <input name="PracticeName" type="text" value="<%=PracticeName %>" /> 
       </td> 
      </tr> 
      <tr> 
       <td height="30"> 
        <b>Phone</b> 
        <p style="float:right; color: red ">* </p> 
       </td> 

       <td> 
        <input name="Phone" type="text" value="<%=Phone %>"/> 
       </td> 
      </tr> 
      <tr> 
       <td height="30"> 
        <b>Email</b> 
        <p style="float:right; color: red ">* </p> 
       </td> 
       <td> 
        <input name="Email" type="text" value="<%=Email %>"/> 
       </td> 
      </tr> 
      <tr> 
       <td height="30"> 
        <b>Image</b> 
       </td> 

       <td> 
        <input name="Image" type="file" /> 
       </td> 
      </tr> 
     </table> 

     </div> 
     <div style="float: right;padding-right: 50px;padding-top: 50px"> 
      <table> 
       <tr> 
       <td width="160" height="30"> 
        <b>Address</b> 
       </td> 
       <td> 
        <input name="Address" type="text" value="<%=Address %>"/> 
       </td> 
       </tr> 
       <tr> 
        <td height="30"> 
         <b>Street</b> 
        </td> 
        <td> 
         <input name="Street" type="text" value="<%=Street %>" /> 
        </td> 
       </tr> 
       <tr> 
        <td height="30"> 
         <b>City</b> 
         <p style="float:right; color: red ">* </p> 
        </td> 
        <td> 
         <input name="City" type="text" value="<%=City %>" /> 
        </td> 
       </tr> 
       <tr> 
        <td height="30"> 
         <b>State</b> 
         <p style="float:right; color: red ">* </p> 
        </td> 
        <td> 
         <input name="State" type="text" value="<%=State %>" /> 
        </td> 
       </tr> 
       <tr> 
        <td height="30"> 
         <b>Country</b> 
         <p style="float:right; color: red ">* </p> 
        </td> 
        <td> 
         <input name="Country" type="text" value="<%=country %>" /> 
        </td> 
       </tr> 
       <tr> 
        <td height="30"> 
         <b>Pin Code</b> 
        </td> 
        <td> 
         <input name="PinCode" type="text" value="<%=PinCode %>" /> 
        </td> 
       </tr> 
       <tr> 
        <td height="30"> 
         <b>How do you know?</b> 
        </td> 
        <td> 
         <input name="HowDoYouKnow" type="text" /> 
        </td> 
       </tr> 
       <tr> 
        <td height="30"> 
         <b>Comment</b> 
        </td> 

        <td> 
         <textarea name="Comments" cols="15" rows="5" readonly></textarea> 
        </td> 
       </tr> 
      </table> 
     </div> 
     <br><br> 
     <div class="footer-bar" align="center" style="padding-top: 30px"> 
      <table align="center" > 
       <tr > 
        <td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td> 
        <td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td> 
       </tr> 
      </table> 
     </div></p> 
         <p></p> 
        </div> 
       </article> 

       <!-- Article 2 end --> 

       <!-- Article 3 start --> 

       <div class="line"></div> 



       <!-- Article 3 end --> 


      </section> 

     <footer> <!-- Marking the footer section --> 

      <div class="line"></div> 

      <p>Copyright 2013 - mysite.com</p> 

      <a href="#" class="up">Go UP</a> 
      <a href="www.df.com" class="by">dh</a> 


     </footer> 

     </section> <!-- Closing the #page section --> 

     <!-- JavaScript Includes --> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     <script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script> 
     <script src="script.js"></script> 
    </body> 
</html>

來源

2013-04-09 JavaCoding

應用一個你想要顯示的CSS類。點擊按鈕只顯示這些字段。

來源

2013-04-09 11:22:51 PSR

可以請您給我一些暗示 – JavaCoding 2013-04-09 11:28:37

只需取2個DIV ..與第一圖像內容和第二分度，第二圖像內容的一個格。一旦ü點擊編輯按鈕即可隱藏第一個div並顯示第二個div .....

來源

2013-04-09 11:26:24 PraJen

如何隱藏ü不內容 – JavaCoding 2013-04-09 11:29:12

要隱藏的內容逐一..只是做一個大格，其中包括各個領域..並使其顯示無... – PraJen 2013-04-09 11:30:44

我不知道如何hide.Give我簡短的代碼 – JavaCoding 2013-04-09 11:33:18

正如普利文說，你不需要兩個不同的頁面，但在同一個頁面兩個div，然後用一些javascript在兩者的顯示/可視性之間切換。可以用每個元件的兩個不同類新，其具有用於顯示（display:none和display:block）或能見度（visibilty: hidden和visibility:visible）不同的性質的類做到這一點。

的JQuery toggle()方法是一種簡單的選擇：

http://api.jquery.com/toggle/

但是記住，它切換display，所以它會影響您的佈局（display:none會影響你的佈局，而visibility:hidden does not），這是一件好事也許你不不想要。一種方法來避免這種情況（但我不是100％肯定這是做的最好的方法）是插入另一個DIV內的每個格（position:absolute）（position:relative）

來源

2013-04-09 13:31:05 edu

如何讓顯示一個頁面的內容，但點擊一個按鈕

回答

相關問題