Change page in same php file

Question

Change page in same php file

Navigation

#1 by (1 votes)

1

Good people

I'm new to php and I have a question here

My challenge is to create a website (simple thing), with 3 pages a homepage, contacts and a page with the products.

But the problem is that I have the contents of the 3 pages in the same file. That is, I have to change the page (from the homepage -> contacts) in the same php (index) file.

How do I?

jquery

asked by anonymous 16.06.2016 / 12:05

1 answer

PHP and javascript - Getting javascript value in PHP (session usage) Separate items from a string using Regex

score 1 · Accepted Answer

This with php does not work. You can however do with javascript. That is, all the contents on one page, and each link makes disappear some contents and others appear:

For this example I'll use jQuery

$('[data-pagina]').on('click', function(){
  var pagina = $(this).data('pagina');
  $('.pagina').hide();
  $(pagina).show();
});

.pagina {
  display:none;  
}
.pagina#homepage {
  display:block;  /* aparecer esta por default, no carregamento da página
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><nav><ul><lidata-pagina="#homepage">homepage</li>
    <li data-pagina="#contactos">contactos</li>
    <li data-pagina="#produtos">produtos</li>
  </ul>
</nav>
  
<div class="pagina" id="contactos">
  <h2>conteudos dos contactos</h2>
</div>
<div class="pagina" id="homepage">
  <h2>conteudos dos homepage</h2>
</div>
<div class="pagina" id="produtos">
  <h2>conteudos dos produtos</h2>
</div>

Complete code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        ul {
            text-align: right;
        }
        li {
            list-style:none;
             display:inline-block;
            margin: 0 10px;
        }
        .pagina {
            display:none;  
         }
         .pagina#homepage {
            display:block;  /* aparecer esta por default, no carregamento da página*/
         }
    </style>
    <title>Tudo numa só página</title>
</head>
<body>
    <nav>
        <ul>
            <li data-pagina="#homepage">homepage</li>
            <li data-pagina="#contactos">contactos</li>
            <li data-pagina="#produtos">produtos</li>
        </ul>
    </nav>

    <div class="pagina" id="contactos">
       <h2>conteudos dos contactos</h2>
    </div>
    <div class="pagina" id="homepage">
       <h2>conteudos dos homepage</h2>
    </div>
    <div class="pagina" id="produtos">
       <h2>conteudos dos produtos</h2>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $('[data-pagina]').on('click', function(){
             var pagina = $(this).data('pagina');
             $('.pagina').hide();
             $(pagina).show();
         });
    </script>
</body>
</html>