How to go to a link when clicking a div without using href

Question

How to go to a link when clicking a div without using href

Navigation

#1 by (6 votes)
#2 by (3 votes)
#3 by (2 votes)

4

I need to redirect the page to a specific link by clicking a div , without using <a href> of HTML.

I'm using HTML, CSS and jQuery and PHP.

Here's a snippet of code:

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

I need New Access to redirect the page without <a href"">Novo Acesso</a> , just clicking on div "btn-oculto"

javascript html jquery css

asked by anonymous 01.01.2015 / 15:23

3 answers

Percentage of hours calculation How to embed CSS in HTML tags?

score 6 · Answer 1

In HTML5 you can do this:

#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>

If you do not want it to look like a link , use CSS to put it in the style you want.

You can also do this:

#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>

You can do without JavaScript, which is recommended. Note that having a href is not a problem. I think your requirement is not this.

#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>

score 3 · Answer 2

Yes, it is possible, you need to use window.location = "http://www.novo.url";

Example ( link ):

$('#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><divid="btn-oculto2">
    <div id="btn-oculto" >Novo acesso</div>
    <div id="btn-oculto" >Liberar conte&uacutedo</div>
</div>

I suggest, as I put it in the example, to use cursor: pointer; in this pseudo-link for the user to realize the functionality.

I also suggest using classes instead of ID if you have more than one case of this functionality.

score 2 · Answer 3

Just grab the click event on the element you'd like the action to occur.

document.querySelector('.btn-oculto').onclick = function(){
    window.location = 'http://pt.stackoverflow.com';
}

.btn-oculto{
  padding:8px 12px;
  background:#fff;
  border:2px solid #ccc;
  color:#333;
  text-align:center;
  max-width:200px;
  cursor:pointer
}

<div class='btn-oculto'>Novo Acesso</div>