Ir para conteúdo

POWERED BY:

Arquivado

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

Francês Black

[Resolvido] navegação sem refresh

Por , em Javascript

Recommended Posts

Francês Black    0

Francês Black
Postado

olá amigos, fiz um script de navegação sem refresh, porem só aparece o conteudi da pagina inicial ao clicar nela, gostaria que de inicio ja aparecese o conteudo dela, caso o usuário clicase em outra ai iria para outra, oque devo mudar para conseguir fazer isso? vai o script!!!!

 

 

<script type="text/javascript">
function id( el ){  
       return document.getElementById( el );  
}  
function hide_all(){  
       var divs = id('content').getElementsByTagName('div');  
       for( var i=0; i<=divs.length; i++)  
       {  
               divs[i].style.display = 'none';  
       }  
}  
/* http://www.javascriptkit.com/jsref/event.shtml */  
function disablelink( e ){  
       var evt = window.event || e  
       if (evt.preventDefault) //supports preventDefault?  
               evt.preventDefault()  
       else //IE browser  
               return false  
}  
window.onload = function(){  
       hide_all();  
       var as = id('content').getElementsByTagName('a');  
       for( var i=0; i<as.length; i++ )  
       {  
               as[i].onclick = function( e ){  
                       hide_all();  
                       var id_el = this.href.split('#')  

                       id( id_el[1] ).style.display = 'block';                  
                       return disablelink( e );  
               }  
       }  
}  
</script>

 

 

divs estao assim:

<div id="content">  
           	<ul>
                   <li><a href="#detalhes">Detalhes</a></li>
                   <li><a href="#comentarios">Comentários</a></li>
               </ul>

                   <div id="detalhes">Detalhes do video</div>
                   <div id="comentarios">comentarios</div>  


           </div><!-- /content -->

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hudson Pereira    4

Hudson Pereira
Postado 

<html>
   <head>
       <script type="text/javascript">
           function id( el ){  
               return document.getElementById( el );  
           }  
           function hide_all(){  
               var divs = id('content').getElementsByTagName('div');  

               for( var i=0; i < divs.length; i++) // RETIRE O "=" DAQUI  
               {  
                   divs[i].style.display = 'none';  
               }  
           }  
           /* http://www.javascriptkit.com/jsref/event.shtml */  
           function disablelink( e ){  
               var evt = window.event || e  
               if (evt.preventDefault) //supports preventDefault?  
                   evt.preventDefault()  
               else //IE browser  
                   return false  
           }  
           window.onload = function(){  
               hide_all();  

               id('home').style.display = 'block'; // ESSA LINHA RESOLVE O SEU PROBLEMA

               var as = id('content').getElementsByTagName('a');  
               for( var i=0; i<as.length; i++ )  
               {  
                   as[i].onclick = function( e ){  
                       hide_all();  
                       var id_el = this.href.split('#')  

                       id( id_el[1] ).style.display = 'block';                  
                       return disablelink( e );  
                   }  
               }  
           }  
       </script>
   </head>
   <body>
       <div id="content">  
           <ul>
               <li><a href="#detalhes">Detalhes</a></li>
               <li><a href="#comentarios">Comentários</a></li>
           </ul>    

           <!-- INSERI PARA MOSTRAR UM EXEMPLO DE HOME -->
           <div id="home">Isso deve ser mostrado na home</div>
           <div id="detalhes">Detalhes do video</div>    
           <div id="comentarios">comentarios</div>  
       </div><!-- /content -->  
   </body>
</html>

 

Dúvidas?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Denilson Telaroli    7

Denilson Telaroli
Postado

acho que o problema está nesta linha: var id_el = this.href.split('#')

ao invés de usar split use o replace e remova o #

 

outra coisa que pode estar atrapalhando é o preventDefault que remove o evento padrão do link que é justamente a ação de click, se for isto pode mudar para href="javascript:void(0)" e usar o rel para informar o id a ser exibido.

 

nota: eu faria com jQuery que fica muito mais simples.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

outra coisa que pode estar atrapalhando é o preventDefault que remove o evento padrão do link que é justamente a ação de click

não é bem assim. O .preventDefault(), impede que o elemento html siga o comportamento padrão dele. Que nesse caso da tag <a>, é enviar uma requisição GET ao servidor.

 

apenas isso. Não impede o click, e não cancela o evento. Apenas impede que o <a> envie uma requisição ao servidor.

Usar javascript:void é um erro.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado
porem só aparece o conteudi da pagina inicial ao clicar nela, gostaria que de inicio ja aparecese o conteudo dela

meu script original:

http://wbruno.com.br/2011/03/12/principio-de-menu-em-abas/

 

aquela linha lá, já faz oque você pediu:

id('home').style.display = 'block'; // ESSA LINHA RESOLVE O SEU PROBLEMA

 

 

você não precisa do .load() do jQuery, pq você não tem ajax nisso ai.

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