wie durch Klicken auf Links

Ich habe drei HTML-Seiten separatwie durch Klicken auf Links

Homepage (mit zwei Links (anmelden) und (anmelden))
-Anmeldung
zwischen zwei HTML-Seiten wechseln sign-up

ich will die andere Seite verstecken, wenn eine Seite wird nur dann angezeigt.

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

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

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

Ich möchte wissen, dass, wie blende ich die andere Seite, wenn die eine Seite angezeigt wird. Bitte helfen. Ich warte auf deine freundliche Antwort.

Quelle

2017-01-27 Badshah Tracker

Wenn eine Seite angezeigt wird, sollte die andere Seite automatisch ausgeblendet werden. –

Ähm ... das ist was Hyperlinks tun; Sie entladen eine Seite und laden die andere Seite. Art der Basis des World Wide Web ... –

Ich gehe davon aus, dass Sie behandeln die Submit-Button geklickt wird. Geben Sie dem äußersten Teil Ihrer Seite eine ID. Sie können Ihre Seiten folgendermaßen verwalten:

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

Quelle

2017-01-27 15:57:38 umtc

wie durch Klicken auf Links

Antwort

Verwandte Themen