9

Preciso redirecionar a página para um link específico ao clicar em uma div, sem usar o <a href> do HTML.

Estou usando HTML, CSS e jQuery e PHP.

Segue um trecho do código:

<div id="btn-oculto2" style="display:none;">
    <div id="btn-oculto" >Novo acesso</div>
    <div id="btn-oculto" >Liberar conte&uacutedo</div>
</div>

Eu preciso que o Novo acesso redirecione a pagina sem <a href"">Novo Acesso</a>,apenas clicando em cima da div "btn-oculto"

3
  • Existe algum motivo para não usar o a href?
    – Maniero
    Commented 1/01/2015 às 14:28
  • Atá onde eu sei, qualquer elemento pode ter um Evento onClick atrelado à ele. Nesse caso, basta ter, por exemplo, um hasmap com classes ou ID como chave e os URLs como valor. Quando o elemento for clicado, você busca a chave corresponde e, se existir, redireciona. Mas eu reforço veementemente o comentário do @bigown. KISS (Keep it simple, stupid!) se você impor que essa funcionalidade funcionará estritamente com Javascript, estará obstruindo seu código desnecessáriamente. Commented 1/01/2015 às 14:38
  • Dê uma olhada no tour. Você pode aceitar uma resposta se ela resolveu seu problema. Você pode votar em todos os posts do site também. Alguma lhe ajudou mais? Precisa que algo seja melhorado?
    – Maniero
    Commented 15/07/2015 às 18:56

5 Respostas 5

12

Em HTML5 dá para fazer isto:

#divlink {
    background-color: #D0D0D0;
    width: 100px;
    height: 100px;
}
a.link {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}
    <a href="http://example.com" class="link">
        <div id="divlink">
            Novo acesso
        </div>
    </a>

Se não quer que pareça um link, use CSS para colocar no estilo que desejar.

Também pode fazer isto:

#divlink {
    background-color: #D0D0D0;
    width: 100px;
    height: 100px;
    cursor: pointer;
}
a.link {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}
<div id="divlink" onclick="window.location='http://example.com';">
    Novo acesso
</div>

Dá para fazer sem JavaScript, o que é recomendável. Note que ter um a href não é problema. Eu acho que seu requisito não é este.

#divlink {
    background-color: #D0D0D0;
    width: 100px;
    height: 100px;
}
a.link {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}
<div id="divlink">
    <a href="http://example.com" class="link">Novo acesso</a>
</div>

Coloquei no GitHub para referência futura.

5

Sim, é possível, precisas de usar window.location = "http://www.novo.url";

Exemplo (http://jsbin.com/zotuyifare/1/):

$('#btn-oculto').click(function(){
  window.location = "http://pt.stackoverflow.com/";
});
#btn-oculto{
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="btn-oculto2">
    <div id="btn-oculto" >Novo acesso</div>
    <div id="btn-oculto" >Liberar conte&uacutedo</div>
</div>

Sugiro, como juntei no exemplo, usar cursor: pointer; nesse pseudo-link para o usuário perceber a funcionalidade.

Sugiro também usar classes em vez de ID se tiveres mais que um caso desta funcionalidade.

4

Basta pegar o evento de click no elemento que você gostaria que ocorresse a ação.

document.querySelector('div').addEventListener('click', () => {
  window.location = 'http://pt.stackoverflow.com'
})
div {
  padding: 8px;
  border: 2px solid #ccc;
  color: #333;
  text-align: center;
  cursor: pointer
}
<div>Novo Acesso</div>

0

So usar o onclick="(window.location='url'

<div id="btn-oculto2" style="display:none;" onclick="(window.location='url')">
1
  • Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 22/02/2023 às 19:07
-2

Segue um trecho do código:

<div id="btn-oculto2" style="display:none;" onclick="(window.location='url')">
    <div id="btn-oculto" >Novo acesso</div>
    <div id="btn-oculto" >Liberar conte&uacutedo</div>
</div>

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 .