Link that opens the "content" in the div beside

I made a very basic example using jQuery . As the Sam example already catches you if you use Vanilla , if you choose jQuery, I think by example, it's easy to implement too.

  

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><divclass="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>

I suggest using Ajax and not iframe, because the height of the iframe will not fit your content; except if you were to use it with set height and automatic scrolling, then yes, the iframe would be a simpler option, as it would just change src and that's it. But I do not 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 page requested.

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

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

Placing 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, making use of class unnecessary:

<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 every href of links has a destination. This href will be used in Ajax to pull the data from the respective page.

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

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 will use   jQuery just to do this, I suggest you use pure JavaScript   even.

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>