如何通过单击链接在两个html页面之间切换

Question

I have three html pages separately 我分别有三个html页面

homepage (with two links (sign up) and (sign in) ) 主页（带有两个链接（注册）和（登录））
sign-in 登入
sign-up 注册

I want to hide the other page, when one page is shown only. 当仅显示一个页面时，我想隐藏另一页面。

homepage.jsp homepage.jsp

<!DOCTYPE html>

<script type="text/javascript">

    function showhide(id) {
        var e = document.getElementById(id);
        e.style.display = (e.style.display == 'block') ? 'none' : 'block';
    }

</script>

<!-- write your code here -->

<div>
    <a href="javascript:showhide('join')"> Create account </a>
    <a href="javascript:showhide('in')"> Sign In </a>
</div>

<div>
        <nav>
            <div id="in" style="display: none;">
                <jsp:include page="sign-in.jsp"></jsp:include>
            </div>

</nav>
<nav>
        <div id="join" style="display: none;">
                <jsp:include page="sign-up.jsp"></jsp:include>
        </div>

</nav>

</div>


<!-- write your code here -->

sign-in.jsp 登录in.jsp

<!DOCTYPE html>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Laar Project Store </title>
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- write your code here -->

<div style="margin: 50px;">

    <div class = "input-group input-group-xs" role = "group">
    <form>
        <table>

            <div class = "input-group input-group-xs">
            <tr>
                <td style="align: right; width: 100px;"><span class="input-group-addon">Email</span></td>
                <td><input type="email" class="form-control" name="email" placeholder="Email" required/></td>
            </tr>
            </div>

            <div class = "input-group input-group-xs">
            <tr>
                <td style="align: right; width: 100px;"><span class="input-group-addon">Password</span></td>
                <td><input type="password" class="form-control" name="password" placeholder="Password" required/></td>
            </tr>
            </div>

            <div class = "input-group input-group-xs">
            <tr>
                <td></td>
                <td><input type="submit" class="btn btn-success btn-xs" value = "Sign In" style="margin-top: 10px; margin-bottom: 10px;"/></td>
            </tr>
            </div>
        </table>
    </form>
    </div>

</div>

<!-- write your code here -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

sign-up.jsp 登录up.jsp

<!DOCTYPE html>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Laar Project Store </title>
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- write your code here -->
<div style="margin: 50px;">

    <div class = "input-group input-group-xs" role = "group">
    <form>
        <table>

            <div class = "input-group input-group-xs">
            <tr>
                <td style="align: right; width: 100px;"><span class="input-group-addon">Email</span></td>
                <td><input type="email" class="form-control" name="email" placeholder="Email" required/></td>
            </tr>
            </div>

            <div class = "input-group input-group-xs">
            <tr>
                <td style="align: right; width: 100px;"><span class="input-group-addon">Password</span></td>
                <td><input type="password" class="form-control" name="password" placeholder="Password" required/></td>
            </tr>
            </div>

            <div class = "input-group input-group-xs">
            <tr>
                <td></td>
                <td><input type="submit" class="btn btn-success btn-xs" value = "Sign In" style="margin-top: 10px; margin-bottom: 10px;"/></td>
            </tr>
            </div>
        </table>
    </form>
    </div>

</div>
<!-- write your code here -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

I want to know that how do i hide the other page when the one page is shown. 我想知道显示一页时如何隐藏另一页。 Please help. 请帮忙。 I am waiting for your kind response. 我正在等待您的友好答复。

Answer 1

I assume that you handle which submit button is clicked. 我假设您处理单击了哪个提交按钮。 So give an id to your page's outmost div. 因此，为您网页的最远div分配一个ID。 An you can manage your pages as follows: 您可以按以下方式管理页面：

$(function () {
            $('#homepageDivId').show();
            $('#signInPageId').hide();
            $('#signOutPageId').hide();

            $('#signInPageId input[type=button]').click(function() {
                $('#homepageDivId').hide();
                $('#signOutPageId').hide();
                $('#signInPageId').show();
            });

             $('#signOutPageId input[type=button]').click(function() {
                $('#signInPageId').hide();
                $('#homepageDivId').hide();
                $('#signOutPageId').show();
            });

              $('#homepageDivId input[type=button]').click(function() {
                $('#signInPageId').hide();               
                $('#signOutPageId').hide();
                $('#homepageDivId').show();
            });
        });

如何通过单击链接在两个html页面之间切换

问题描述

1 个解决方案

解决方案1
4 2017-01-27 15:57:38

如何通过单击链接在两个html页面之间切换

问题描述

1 个解决方案

解决方案1 4 2017-01-27 15:57:38

解决方案1
4 2017-01-27 15:57:38