javascript - 如何获取显示一页的内容但单击按钮

Question

我有一个页面有一些内容加上一个编辑按钮所以当你点击编辑按钮时它会显示第二页。我希望两者都只在一页中。它看起来像姓氏（文本区域转换为文本字段）请告诉我怎么做屏幕截图是

源代码如下

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

score 1 · Accepted Answer

正如Praveen所说，您不需要两个不同的页面，而是同一页面中的两个div，然后使用一些javascript在两者的显示/可见性之间切换。您可以对每个元素使用两个不同的类来执行此操作，这些类具有不同的显示 ( display:noneand display:block) 或可见性 ( visibilty: hiddenand visibility:visible) 属性。

JQuerytoggle()方法是一个简单的选择：

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

但请注意它会切换display，因此它会影响您的布局（display:none 影响您的布局，而visibility:hidden does not），这可能是您不想要的。避免这种情况的一种方法（但我不是 100% 确定这是最好的方法）是将每个 div ( position:absolute) 插入另一个 div ( position:relative)

score 0 · Accepted Answer

只需制作两个 div .. 一个 div 具有第一个图像内容，第二个 div 具有第二个图像内容。一旦你点击编辑按钮，只需隐藏第一个 div 并显示第二个 div .....

score 0 · Accepted Answer

0

应用您要显示的 CSS 类。通过单击按钮仅显示这些字段。

于 2013-04-09T11:22:51.497 回答

javascript - 如何获取显示一页的内容但单击按钮

3 回答 3

Related

Reference