Question

我分别有三个html页面

主页（有两个链接（注册）和（登录））
登入
的注册

我想隐藏另一页，只显示一页。

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

登录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>

登录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>

我想知道在显示一个页面时如何隐藏其他页面。     请帮忙。我在等你的回应。

Answer 1

我假设你处理了点击了哪个提交按钮。因此，请为您的网页提供最高级别的ID。您可以按如下方式管理您的页面：

$(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();
            });
        });

如何通过点击链接

1 个答案: