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

Question

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

我分别有三个 html 页面

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

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

主页.jsp

<!DOCTYPE html>

Run Code Online (Sandbox Code Playgroud)

<script type="text/javascript">

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

</script>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

登录.jsp

<!DOCTYPE html>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

注册.jsp

<!DOCTYPE html>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

我想知道如何在显示一页时隐藏另一页。请帮忙。我在等待你的友好回应。

Answer 1

bbc*_*iao 5

我假设您处理单击了哪个提交按钮。所以给你页面的最外层 div 一个 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();
            });
        });

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，9 月前
查看次数：	1657 次
最近记录：	8 年，9 月前