Search code examples
javascripthtmlajaxnavigationmaterialize

How can i make my buttons navigate to diffrent pages?

i want to have a home page that has a navigation button bar, each button opens me a different page in my code, and have a "go back" button to go back to home page. i don't know how to make the pages html code none seen in the home page, and when i click the button they will appear (i prefer with a slide right animation) and when i click a go back button, it will slide left back to the home screen this is my code for example:

nav.nav-center ul {
  text-align: center;
}

nav.nav-center ul li {
  display: inline;
  float: none;
}

nav.nav-center ul li a {
  display: inline-block;
}
<!DOCTYPE html>
<html>

<head>

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" integrity="sha384-PmY9l28YgO4JwMKbTvgaS7XNZJ30MK9FAZjjzXtlqyZCqBY6X6bXIkM++IkyinN+" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap-theme.min.css" integrity="sha384-jzngWsPS6op3fgRCDTESqrEJwRKck+CILhJVO5VvaAZCq8JYf8HsR/HPpBOOPZfR" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js" integrity="sha384-vhJnz1OVIdLktyixHY4Uk3OHEwdQqPppqYR8+5mjsauETgLOcEynD9oPHhhz18Nw" crossorigin="anonymous"></script>

  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <meta name="viewport" content="width=device-width, initial scale=1">

</head>
<style>

</style>

<body>
  <nav class="nav-center" role="navigation">
    <div class="nav-wrapper container">
      <ul>
        <li><a class="waves-effect waves-light btn">Button1</a></li>
        <li><a class="waves-effect waves-light btn">Button2</a></li>
      </ul>
    </div>
  </nav>

  <h4>This is supposed to be shown only after clicking the button1</h4>
  <p>i want the button to navigate the page so this will be shown only after button 1 is clicked</p>

  <h4>This is supposed to be shown only after clicking the button2</h4>
  <p>i want the button to navigate the page so this will be shown only after button 2 is clicked</p>


</body>

</html>

i want to see only the buttons in the home page and when i click them, new page will appear without the buttons, with a go back to home page button, and have the text that supposed to be according to each button. what i have at the moment is whole html code shown at once and there is no division to pages

Solution

  • You have to create separate HTML Files to display on different routes. If you are beginner I have changed your code on this link

    Online Code

    Edit: Explaining Code

    create two files for button1 button2 (e.g. a.html b.html) and paste their content accordingly.

    and in index.html remove that code which you have copied to a.html and b.html.

    in index.html - 

    <a href="a.html" class="waves-effect waves-light btn">Button1</a>
<a href="b.html" class="waves-effect waves-light btn">Button2</a>

    and it should work.