Ir para conteúdo

POWERED BY:

Arquivado

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

vazzoler

Apresentar apenas a URL original do site

Por , em Desenvolvimento frontend

Recommended Posts

vazzoler    0

vazzoler
Postado

Bom dia Pessoal. Estou com o seguinte problema: tenho um site de uma página apenas com uma navbar: 

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	<ul class="nav navbar-nav navbar-right">
    	<li><a href="#recursos" class="page-scroll">Recursos</a></li>
		<li><a href="#depoimentos" class="page-scroll">Depoimentos</a></li>
		<li><a href="#contato" class="page-scroll">Contato</a></li>
	</ul>
</div>

Quando clica no menu a URL do site é alterada para www.meusite.com.br#recursos. Gostaria de saber como faço para manter a URL original quando clico em qualquer link do menu?

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

vazzoler    0

vazzoler
Postado
4 horas atrás, Tadeu Barbosa disse:

Não entendi. Você quer manter a URL, mas ir para certo conteúdo? Você está se referindo àqueles sites que quando se clica em um link ele "rola" a página até o conteúdo? É isto?!

 

Isso mesmo, quando clica no menu, rola até o conteúdo desejado, mas sem modificar a URL.

Compartilhar este post

Link para o post
Compartilhar em outros sites

luiz14    16

luiz14
Postado

Você pode utilizar o onclick no lugar do href e quando você clicar no link, fazer um determinado conteúdo aparecer e outro desaparecer e pode até regular a velocidade que isso acontece sem que a url mude.

Compartilhar este post

Link para o post
Compartilhar em outros sites

vazzoler    0

vazzoler
Postado
3 minutos atrás, luiz14 disse:

Você pode utilizar o onclick no lugar do href e quando você clicar no link, fazer um determinado conteúdo aparecer e outro desaparecer e pode até regular a velocidade que isso acontece sem que a url mude.

Conhece algo pronto?

Compartilhar este post

Link para o post
Compartilhar em outros sites

luiz14    16

luiz14
Postado

Não tenho certeza, mas no site do Bootstrap pode ser que tenha algo do tipo. Vou fazer um código aqui em cima desse seu código, sem Jquery, para te mostrar se isso já resolve seu problema.

Compartilhar este post

Link para o post
Compartilhar em outros sites

luiz14    16

luiz14
Postado

Esse código aqui tá bem simples, mas você vai perceber que quando você clicar no link a página não vai carregar nem mudar a url e vai aparecer um conteúdo de acordo com o link que eu cliquei e com o que eu coloquei:

 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        function recursos(){
     var contato = document.getElementById("contato");
     contato.style.display = "none";       
     var depoimento = document.getElementById("depoimento");
     depoimento.style.display = "none";
     var recursos = document.getElementById("recursos");
     recursos.style.display = "block";
 }
 function depoimento(){
     var contato = document.getElementById("contato");
     contato.style.display = "none";       
     var recursos = document.getElementById("recursos");
     recursos.style.display = "none";
     var depoimento = document.getElementById("depoimento");
     depoimento.style.display = "block";
 }
 function contato(){       
     var recursos = document.getElementById("recursos");
     recursos.style.display = "none";
     var depoimento = document.getElementById("depoimento");
     depoimento.style.display = "none";
     var contato = document.getElementById("contato");
     contato.style.display = "block";
 }
    </script>
</head>
<body>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav navbar-right">
            <li><a onclick="recursos()" class="page-scroll">Recursos</a></li>
            <li><a onclick="depoimento()" class="page-scroll">Depoimentos</a></li>
            <li><a onclick="contato()" class="page-scroll">Contato</a></li>
    </ul>
</div>
    <br/><br/>
    <div id="recursos" style="display: none;">
        <p>Recurso</p>
    </div>
    <div id="depoimento" style="display: none;">
        <p>Depoimento</p>
    </div>
    <div id="contato" style="display: none;">
        <p>Contato</p>
    </div>
</body>
</html>

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

luiz14    16

luiz14
Postado

Para mudar para seta quando for clicar no link, é só você colocar no css: "cursos: pointer". 

Agora, luiz14 disse:

Para mudar para seta quando for clicar no link, é só você colocar no css: "cursos: pointer". 

*cursor

Compartilhar este post

Link para o post
Compartilhar em outros sites

vazzoler    0

vazzoler
Postado
39 minutos atrás, luiz14 disse:

Para mudar para seta quando for clicar no link, é só você colocar no css: "cursos: pointer". 

*cursor

Obrigado pela força Luiz. Vou tentar fazer aqui...

Compartilhar este post

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

Informação importante

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

  Aceito