Link that opens the "content" in the next div

Question

all right?

I have two div in content.

The first div has two links.

By clicking on the link I would like the result to appear in the second, in case a page in php or html.

Example:

How can I do that?

I was recommended Javascript

I found the iframe option, but I couldn’t

Answer 1

I suggest that you use Ajax and not iframe, because the height of the iframe will not fit your content; unless you were to use it with set height and automatic scroll, then iframe would be a simpler option, because changing the src and that’s it. But I don’t think that’s the case.

Ajax with pure Javascript:

This method will call the page specified in each link and will insert in the second div the return of the requested page.

You need to create an event that will capture the click on the links. To do this, include a class on each menu link, so:

<a class="menu" href="loja1.php">Loja 1</a>
   ^^^^^^^^^^^^
<a class="menu" href="loja2.php">Loja 2</a>
   ^^^^^^^^^^^^

Putting class on each link, you will capture it this way:

document.querySelectorAll("a.menu");

But you can also do it in a simpler way if the links are inside a container, it is unnecessary to use class:

<nav>
    <a href="loja1.php">Loja 1</a>
    <a href="loja2.php">Loja 2</a>
</nav>

Then you would capture the links with:

document.querySelectorAll("nav a");

See that each href links have a destination. This href will be used in Ajax to pull data from the respective page.

Code that will create events and Ajax (code explanations):

document.addEventListener("DOMContentLoaded", function(){ // espera o DOM ser carregado
   var menu = document.querySelectorAll("a.menu"); // seleciona todos os links com a class .menu

   // guarda a segunda div numa variável
   // troque "div2" pelo id da sua div que irá receber os dados
   var div = document.getElementById("div2");

   // faz um loop em todos os itens selecionados
   for(var x=0; x<menu.length; x++){
      // cria o evento onclick para cada link
      menu[x].onclick = function(e){
         e.preventDefault(); // cancela a ação do link
         var page = this.href; // pega o atributo href do link clicado

         // exibe uma mensagem na div enquanto o Ajax é processado
         div.innerHTML = "Carregando...";

         if(ajax) ajax.abort(); // aborta se o Ajax estiver sendo processado

         var ajax = new XMLHttpRequest(); // cria o objeto XHR do Ajax

         ajax.open("GET", page, true); // define as opções
         ajax.onreadystatechange = function(){
            if(this.readyState == 4 && this.status == 200){
               // se o Ajax foi bem sucedido, envia o retorno para a div
               div.innerHTML = this.responseText;
            }
         }
         ajax.send(); // faz a requisição

      }
   }

});

If you were using jQuery the code would be simpler. But if you are going to use jQuery just to do this, I suggest using pure Javascript even.

Answer 2

I made a very basic example using jQuery. As the example of Sam will already serve you if you use Vanilla, if you choose jQuery, I think by example, it’s easy to implemete as well.

OBS: As the Sam said above if not using jQuery do with Vanilla even though jQuery is simpler, I think it would not be worth loading a library in the project just for this.

$(function(){
  $('#link1').on('click', function() {
      
    $.ajax({
      url: 'caminho-da-loja1-aqui',
      success: function(data){
        $('#conteudo').html(data);
      }
    })
  })

  $('#link2').on('click', function() {
      
    $.ajax({
      url: 'caminho-da-loja2-aqui',
      success: function(data){
        $('#conteudo').html(data);
      }
    })
  })

})

.col {
  height: 80vh;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-12 text-center">
      <a href="#">HOME</a>
      <a href="#">| REGIONAIS</a>
      <a href="#">| INFRA CAMPO</a>
    </div>
    <hr><br><br>   
    <div class="col bg-warning">
      <a href="#" id="link1">LOJA 1</a><br>
      <a href="#" id="link2">LOJA 2</a>
    </div>
    <div class="col bg-primary" id="conteudo">
      CONTEÚDO AQUI
    </div> 
  </div>
</div>

Answer 3

Fiz um exemplo simples, basta vc adaptar! Espero que Ajude!

  function EscondeElemento(id){
            var elemento = document.getElementById(id); 
            if(elemento.style.display == 'none') {
                elemento.style.display = 'block'; 
            } else{
                elemento.style.display = 'none'; 
            }
        }  

 <body> 
        <center>
             
            <a href="#" onclick="EscondeElemento('div')"/> Link 1</br></br>
            <a href="#" onclick="EscondeElemento('div')"/> Link 2</br></br>
            <br/>
            
        
            <center>
                <div id="div">AQUI SUA SEGUNDA DIV </div> 
            </center>
        </center>
    </body>