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

标签 javascript jquery html css ajax

我有一个包含一些内容和一个编辑按钮的页面所以当你点击编辑按钮时它会显示第二页。我想要它，就好像两者都只在一页上一样。它看起来像姓氏(文本区域转换为文本字段)请告诉我该怎么做 屏幕截图是

源码如下

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

最佳答案

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

JQuery toggle() 方法是一个简单的选项:

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

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

关于javascript - 如何获取显示一页的内容但单击按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15900489/

上一篇：android - jQuery Mobile 中的文本区域

下一篇：jQuery hide() 效果不佳

相关文章：

javascript - 将 $scope 传递给 Angularjs 中的服务

jquery - 如何将选择框的内容存储到变量中？

javascript - 将鼠标悬停在固定的 HTML 元素上时防止 JQuery 可排序传播

javascript - 如何在单个页面应用程序上有多个 css 打印布局？

javascript - 未捕获的语法错误 : Unexpected end of JSON input [}

javascript - 如何将 firebase firestore 与我本地的 firebase 模拟器套件连接？

javascript - 如何设置 JQuery 自动完成标题

javascript - 如何删除从特定加载文件生成的所有事件监听器？

javascript - 是否可以仅获取元素的隐藏文本？

jquery - 强制 div 由 JQuery 插入到容器中以保持在同一行

©2024 IT工具网  联系我们