1

Nestra trabalho da facul, estu fazendo um app com vários menus, se eu fo fazer tudo num único html, vai ficar m arquivo enorme. Por isso, ao clicar as opções de um determinado menu, eu gostaria de continuar a execução do app com outro documento html, carregado no lugar do atual. Poderia fazer com html com algo do tipo: < a href..... /> certo?

Mas eu gostaria de fazer isso dentro de uma função javascript, que é acionada ao clicar um botão de um menu. Segue o trecho do meu código:

    <div class="menu" id="menuCorNaoCor" style="display:none">
            <div class="centralizar">
                <button class="botao" onClick="carregarMenuCorrentista()"> Correntista </button>
                <button class="botao" > Não Correntista </button>
            </div>
    </div>

<script>
        function carregarMenuCorrentista(){
          //Carrega o menu, que está em outro documento html
        }

</script>
10
  • Vou carregar ele centralizado, no meio da página, no lugar do atual. Eu tenho um arquivo css que faz essa formatação para menus já. A questão é só que eu não queria botar mais esse menu no mesmo doc html, que já está ficando grande. Commented 22/04/2018 às 19:51
  • 1
    Sim, vc quer carregar o conteúdo de outra página dentro da <div class="centralizar">?
    – Sam
    Commented 22/04/2018 às 19:53
  • É, de certa forma. Mas isso, somente ao clique do botão Correntista por exemplo. Commented 22/04/2018 às 19:55
  • vou editar a pergunta pra vc ver como fica... fica bem melhor pra fazer isso, porque vc vai ter que usar ajax
    – Sam
    Commented 22/04/2018 às 19:58
  • :O Só da pra fazer com ajax? Eu ainda não vi isso. Commented 22/04/2018 às 19:59

1 Resposta 1

0

Coloque na função esse Ajax em JS puro, substituindo pagina.html pela página que você quer carregar. Isso irá substituir a página inteira pelo retorno do Ajax:

if(navigator.appName == "Microsoft Internet Explorer"){
    var http = new ActiveXObject("Microsoft.XMLHTTP");
}else{
    var http = new XMLHttpRequest();
}

var url_ = "pagina.html";
http.open("GET", url_, true);
http.onreadystatechange = function(){
   if(http.readyState == 4){
      document.querySelector("html").innerHTML = http.responseText;
   }
}
http.send(null);

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 .