Change page in same php file

Asked

Viewed 166 times

1

Good staff

I’m new in php and 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 to have the contents of all three pages in the same file. That is, I have to change pages (from the homepage -> contacts) in the same php file (index).

How do I do?

jquery

  • Hello John, welcome to Sopt, already have some code made ? If yes, you can post here for a better help on your problem?

  • Index.php <!DOCTYPE html> <html> <head> <title>Site - Homepage</title> </head> <body background= "image.jpg"> <font align= center face= "Comic Sans MS" size=-1 Color= ##000000> <H1>Welcome to the site</H1> <font align= left face= "Comic Sans MS" size=-1 Color= #000000> <H2>Highlights:</H2> <p>bla bla in discount</p>

  • João, you can post the code of your index.php ?

  • You want to redirect to another page when you click a button for example?

  • Then I have 2 more.php files that I want to join

  • Yes for example, Fábio. But the content of the other files must be all in index.php

  • Then, you can simply join the contents of the other PHP files into the same code where you have the index or you can choose to go to another page by clicking a button

  • yes ok Fábio and then as I do?

  • I want to merge all the files in the index, but I still want to be able to navigate the site as if it were in different files.

  • It’s called a parameter and I must wear the href

  • I think it is better for example you have the index, and then for example a tab or some button to navigate to another page, I think it will be more practical and ergonomic

  • Yes it was the easiest but the exercise is to have everything together in the same file and even use can navigate as if the files were separate

Show 7 more comments

1 answer

1


This can’t be done with php. You can do it with javascript, though. That is, all the contents on a single page, and each link makes some content disappear and others appear:

For this example I will 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>
    <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>

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>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.