0

tudo bem?

Eu tenho duas div no conteudo.

A primeira div tem dois links.

Ao clicar no link gostaria que o resultado aparecesse na segunda, No caso uma página em php ou html.

Exemplo:inserir a descrição da imagem aqui

Como posso fazer isso?

Me recomendaram Javascript

Achei a opção iframe, mas não consegui

4
  • coloca o codigo que você ja tem pra que possamos ajudar Commented 20/07/2018 às 19:54
  • O conteúdo dos links estão aonde?
    – LeAndrade
    Commented 20/07/2018 às 20:01
  • Tem que usar Ajax para fazer isso. Iframe não é a melhor escolha, a não ser que a segunda div tenha altura fixa.
    – Sam
    Commented 20/07/2018 às 20:21
  • Está usando jQuery?
    – Sam
    Commented 20/07/2018 às 20:30

3 Respostas 3

0

Fiz um exemplo bem básico utilizando jQuery. Como o exemplo do Sam já te atende se caso for utilizar Vanilla, caso opte por jQuery, acho que pelo exemplo, fica fácil de implemetar também.

OBS: Como o Sam disse acima se não estiver utlizando jQuery faça com Vanilla mesmo, apesar de com jQuery ser mais simples, acho que não valeria a pena carregar uma biblioteca no projeto só para isto.

$(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>

2
  • Achei interessante a sua resposta, porém achei ruim criar vários eventos para cada link. Acho que dá pra melhorar isso fazendo um evento apenas. Se o cara tiver 20 links terá que criar um evento para cada um, o que é péssimo rs.
    – Sam
    Commented 21/07/2018 às 5:33
  • Sim claro, é que como percebi que ele não manja muito de Javascript e no exemplo dele só tem dois links, quis deixar o mais simples possível para que ele entendesse.
    – LeAndrade
    Commented 21/07/2018 às 14:19
0

Sugiro que use Ajax e não iframe, porque a altura do iframe não irá se ajustar ao seu conteúdo; exceto se você fosse usá-lo com altura definida e scroll automático, aí sim, o iframe seria uma opção mais simples, pois bastaria alterar o src e pronto. Mas não creio que seja o caso.

Ajax com JavaScript puro:

Este método irá chamar a página especificada em cada link e irá inserir na segunda div o retorno da página requisitada.

É preciso criar um evento que irá capturar o clique nos links. Para isso, inclua uma class em cada link do menu, assim:

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

Colocando class em cada link, você irá capturá-la desta forma:

document.querySelectorAll("a.menu");

Mas pode fazer também de uma forma mais simples se os links estiverem dentro de um contâiner, sendo desnecessário o uso de class:

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

Então você capturaria os links com:

document.querySelectorAll("nav a");

Veja que cada href dos links possui um destino. Esse href será usado no Ajax para puxar os dados da respectiva página.

Código que irá criar os eventos e o Ajax (explicações no código):

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

      }
   }

});

Se estivesse usando jQuery o código seria mais simples. Mas se for usar jQuery apenas para fazer isso, eu sugiro que use JavaScript puro mesmo.

-2
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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .