Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

felipebmfaria

Carregar conteúdo sem reload

Por , em Javascript

Recommended Posts

felipebmfaria    1

felipebmfaria
Postado

Boa tarde!

 

observem este print: Clique aqui

 

Observem o menu na parte superior direita.

Queria que ao clicar em "história" o texto correspondente a história fosse carregado sem reload da pagina... e o mesmo com filosofia...

 

Já usei ajax para carregar textos sem reload, principalmente com accordeon, mas é que este layout pede uma aplicação mais específica...

Alguém conhece um script que possa me ajudar?

 

Grato desde já.

Compartilhar este post

Link para o post
Compartilhar em outros sites

crucifier    0

crucifier
Postado

use jquery

aí faça a página com o conteudo de historia e filosofia sem o layout

aí com jquery faça tipo:

 

$(function() {

$("a#linkHistoria").click(function() {

$("div#conteudo").load("pagina_historia.html");

});

});

e assim por diante ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

exemplo de carregamento de conteudo com ajax:

http://forum.imasters.com.br/index.php?/topic/403171-pagina-dentro-de-div-ajax-problema-ao-atualizar/page__view__findpost__p__1581230

Compartilhar este post

Link para o post
Compartilhar em outros sites

felipebmfaria    1

felipebmfaria
Postado

Li o topico mas confesso que nao entendi muito bem...

 

fui adaptar mas o conteudo dos dois links foram exibidos ao mesmo tempo.

 

<html>
<head>
<script type="text/javascript">
function id( el ){
        return document.getElementById( el );
}
function pega_arq( url ){
        var file = url.split('#');
        return ( file[1] ) ? file[1]+'.html' : 'home.html';
}
function getHTTPObject(){
        if(window.XMLHttpRequest){
                return new XMLHttpRequest();
        }else if(window.ActiveXObject){
                var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];
                for(var i = 0; i < prefixes.length; i++){
                        try     {
                                return new ActiveXObject(prefixes[i] + ".XMLHTTP");
                        } catch (e) {}
                }
        }
}
var xmlHttp = getHTTPObject();
function abre( arq ){
        xmlHttp.open("GET", arq,true);
        xmlHttp.onreadystatechange = function(){
                if (xmlHttp.readyState == 4){
                        id('content').innerHTML = xmlHttp.responseText;
                }               
        }
        xmlHttp.send( null );
}
window.onload = function(){
        var as = document.getElementsByTagName('a');

        for( var i=0; i<as.length; i++ ){
                as[i].onclick = function(){
                        abre( pega_arq( this.href ) );
                }
        }
        abre( pega_arq( document.location.href ) );
}
</script>
</head>
<body>
        
        <a href="#contato">Contato</a>
        <a href="#missao-valores">Missao, Valores</a>
        
        <div id="content">
        
        <div id="#contato">Lorem Ipsum 1</div>
        <div id="#missao-valores">Lorem Ipsum 2</div>
        
        
        </div><!-- /content -->
        
        
        
</body>
</html>

Grato.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

tá... imagina assim:

 

index.html

<html>
<head>
<script type="text/javascript">
function id( el ){
        return document.getElementById( el );
}
function pega_arq( url ){
        var file = url.split('#');
        return ( file[1] ) ? file[1]+'.html' : 'home.html';
}
function getHTTPObject(){
        if(window.XMLHttpRequest){
                return new XMLHttpRequest();
        }else if(window.ActiveXObject){
                var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"];
                for(var i = 0; i < prefixes.length; i++){
                        try     {
                                return new ActiveXObject(prefixes[i] + ".XMLHTTP");
                        } catch (e) {}
                }
        }
}
var xmlHttp = getHTTPObject();
function abre( arq ){
        xmlHttp.open("GET", arq,true);
        xmlHttp.onreadystatechange = function(){
                if (xmlHttp.readyState == 4){
                        id('content').innerHTML = xmlHttp.responseText;
                }               
        }
        xmlHttp.send( null );
}
window.onload = function(){
        var as = document.getElementsByTagName('a');

        for( var i=0; i<as.length; i++ ){
                as[i].onclick = function(){
                        abre( pega_arq( this.href ) );
                }
        }
        abre( pega_arq( document.location.href ) );
}
</script>
</head>
<body>
        
        <a href="#contato">Contato</a>
        <a href="#missao-valores">Missao, Valores</a>
        
        <div id="content">
        
			<p>Conteudo da Home</p>        
        
        </div><!-- /content -->
        
        
        
</body>
</html>

e agora:

missao-valores.html


			<h1>Missão E Valores</h1>
			
			<p>Conteudo de missão e valores</p>
entendeu ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

felipebmfaria    1

felipebmfaria
Postado

William Bruno

 

acho que entendi sim, até criei o arquivo contato.html com outro conteudo e pude visualizar melhor, vou fazer uns testes e volto para responder.

 

grato.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

@felipebmfaria e felipebath observei que se trata da mesma pessoa.

 

não é permitido possuir 2 contas neste fórum.

Escolha com qual você gostaria de permanecer, que a outra será excluida.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito