How to go to a link by clicking on a div without using <a href>

Asked

Viewed 19,339 times

8

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

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

Follows an excerpt from the 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 by clicking on the div "btn-oculto"

javascript jquery html css

  • Is there any reason not to use the a href?

  • Until where I know, any element can have an onClick Event attached to it. In that case, just have, for example, a hasmap with classes or ID as key and the Urls as value. When the element is clicked, you search for the corresponding key and, if it exists, redirect. But I strongly reinforce the @bigown comment. KISS (Keep it simple, stupid!) if you impose that this functionality will work strictly with Javascript, you will be obstructing your code unnecessarily.

  • Take a look at [tour]. You can accept an answer if it solved your problem. You can vote on every post on the site as well. Did any help you more? You need something to be improved?

4 answers

12

HTML5 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 don’t want to look like one link, use CSS to put in the style you want.

You can do this too:

#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 a href no 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>

I put in the Github for future reference.

5

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

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

$('#btn-oculto').click(function(){
  window.location = "/";
});
#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>

I suggest, as I put it together in the example, to use cursor: pointer; 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 feature.

4

Just pick up the event from click in the element you would like the action to take place.

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

-2

Follows an excerpt from the code:

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

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.