[DÚVIDA] Carregar conteúdo dentro de uma DIV na mesma página
16/10/2018
0
Fala galera, preciso de uma ajuda!!!
Tenho um menu da seguinte forma:
<nav class="menu" tabindex="0">
<div class="menu-colapsado"></div>
<header class="foto">
<img src="#" />
<h2>Teste</h2>
</header>
<ul>
<li tabindex="0" class="icone1"><span>Menu1</span></li>
<li tabindex="0" class="icone2"><span>Menu2</span></li>
</ul>
</nav>
<main>
<div class="helper">
Testando
</div>
</main>
Gostaria de saber de qual forma seria possível ao clicar por exemplo no Menu1 e carregar dentro da div com a class "helper" o conteúdo contido no menu1? sem carregar uma nova página e sim carregar dentro da div class helper
Tenho um menu da seguinte forma:
<nav class="menu" tabindex="0">
<div class="menu-colapsado"></div>
<header class="foto">
<img src="#" />
<h2>Teste</h2>
</header>
<ul>
<li tabindex="0" class="icone1"><span>Menu1</span></li>
<li tabindex="0" class="icone2"><span>Menu2</span></li>
</ul>
</nav>
<main>
<div class="helper">
Testando
</div>
</main>
Gostaria de saber de qual forma seria possível ao clicar por exemplo no Menu1 e carregar dentro da div com a class "helper" o conteúdo contido no menu1? sem carregar uma nova página e sim carregar dentro da div class helper
Fernando Munhoz
Curtir tópico
+ 0
Responder
Post mais votado
17/10/2018
Amigo, muito obrigado pela resposta. Entendi seu ponto de vista e já me abriu uma opção, porém o menu1, vamos supor que seja uma página de cadastros, certo ? Então eu teria um arquivo cadastro.html e ao clicar no menu1 ele deve carregar todo o conteudo dessa página dentro doa div helper, é possível utilizando o textContent?
Ah ta, não tinha entendido teu problema. Tu pode fazer da seguinte forma:
<div class="helper">
<?php
if(isset($_GET['pasta']) && isset($_GET['pagina']) && file_exists()){
inclue('modulos/'.$_GET['pasta'].'/'.$_GET['pagina'].'.html')
}else{
include('home/home.html')
}
?>
</div>
E no seu menu, coloque:
<li tabindex="0" class="icone1"><a href="?pasta=cadastro&pagina=cadastro.html"><span>Menu1</span></a></li>
E toda a vez que tu clicar no link, ele vai buscar a partir da tua index o caminho "modulos/cadastro/cadastro.html" e incluir dentro da tua div, se ele n encontrar, ele inclui a pagina home padrão. Isso em PHP, que eu considero mais facil que javascript pra esse tipo de coisa.
Em javascript, procure por uma função FileReader e lance no innerHTML da div como eu te falei no exemplo anterior.
Desculpe qualquer coisa. :D
no file_exists faltou o parametro:
<?php
if(isset($_GET['pasta']) && isset($_GET['pagina']) && file_exists('modulos/'.$_GET['pasta'].'/'.$_GET['pagina'].'.html')){
inclue('modulos/'.$_GET['pasta'].'/'.$_GET['pagina'].'.html')
}else{
include('modulos/home/home.html')
}
?>
Alex William
Responder
Mais Posts
16/10/2018
Alex William
Estancie uma id para a div helper e para o span do menu1 e depois mande que o html dessa div receba o textContent do menu:
<nav class="menu" tabindex="0">
<div class="menu-colapsado"></div>
<header class="foto">
<img src="#" />
<h2>Teste</h2>
</header>
<ul>
<li tabindex="0" class="icone1" onclick="executaHelper();"><span id="menu1">Menu1</span></li>
<li tabindex="0" class="icone2"><span>Menu2</span></li>
</ul>
</nav>
<main>
<div class="helper" id="helper">
Testando
</div>
</main>
<script>
function executaHelper(){
document.getElementById('helper').innerHTML = document.getElementById('menu1').textContent;
}
</script>
Responder
16/10/2018
Fernando Munhoz
Amigo, muito obrigado pela resposta. Entendi seu ponto de vista e já me abriu uma opção, porém o menu1, vamos supor que seja uma página de cadastros, certo ? Então eu teria um arquivo cadastro.html e ao clicar no menu1 ele deve carregar todo o conteudo dessa página dentro doa div helper, é possível utilizando o textContent?
Responder
17/10/2018
Alex William
Amigo, muito obrigado pela resposta. Entendi seu ponto de vista e já me abriu uma opção, porém o menu1, vamos supor que seja uma página de cadastros, certo ? Então eu teria um arquivo cadastro.html e ao clicar no menu1 ele deve carregar todo o conteudo dessa página dentro doa div helper, é possível utilizando o textContent?
Ah ta, não tinha entendido teu problema. Tu pode fazer da seguinte forma:
<div class="helper">
<?php
if(isset($_GET['pasta']) && isset($_GET['pagina']) && file_exists()){
inclue('modulos/'.$_GET['pasta'].'/'.$_GET['pagina'].'.html')
}else{
include('home/home.html')
}
?>
</div>
E no seu menu, coloque:
<li tabindex="0" class="icone1"><a href="?pasta=cadastro&pagina=cadastro.html"><span>Menu1</span></a></li>
E toda a vez que tu clicar no link, ele vai buscar a partir da tua index o caminho "modulos/cadastro/cadastro.html" e incluir dentro da tua div, se ele n encontrar, ele inclui a pagina home padrão. Isso em PHP, que eu considero mais facil que javascript pra esse tipo de coisa.
Em javascript, procure por uma função FileReader e lance no innerHTML da div como eu te falei no exemplo anterior.
Desculpe qualquer coisa. :D
Responder
Clique aqui para fazer login e interagir na Comunidade :)