How to make
tag behave as tag?

Question

This is code of web page:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css.css"  >
    </head>
    <body>
        <script>
            function func() {   
                // do some checks
                window.location = "http://google.com";
            }    
        </script>

        <a href="http://google.com">link</a>
        <br><br>
        <a href="http://google.com"><div class="button">button 1</div></a>
        <br>
        <div class="button" onclick="func()">button 2</div>
    </body>
</html>

This is css file:

a, a:hover, a:visited, a:active {
    color: inherit;
    text-decoration: none;
}

.button {
    width: 100px;    
    display: block;
    background-color: #cccccc; 
    cursor: pointer;
    text-align: center;
    border: 1px solid #666666;
    padding: 3px;
}

There is simple <a> link in begin of web page - when user click on that link some site is load.

Then there is a div that is used as a button, it also wrap in <a> tag and it also lead to same site when user click on that div.

Then there is another div that is used as a button, but it not wrap in <a> tag and when user click on that div some javascript function is called and after some checks the same site is load.

This is the problem. When user hover his mouse over link or first div the URL is displayed on bottom of user browser (http://google.com), but this URL isn't displayed in case of second button. I want the same behavior in all cases - either in all cases user don't see the URL or in all cases user see it.

How can I achieve it?

Your only option here is to change it to an A tag. Could you explain why it is an div tag? Is it agains crawlers or bots? It's a native browser thingy in this case, what you could do is replace the tag with an — Mathijs Segers, May 13 '16 at 08:08
Support for Window.Status has been removed from all browsers by default... if you want the same behaviour for and
then don't put the url in the href but instead use onclick="location.href blah blah... that way both the div and a href will show nothing in the status bar. — Paul Zahra, May 13 '16 at 08:16
Possible duplicate of [a href link for entire div in HTML/CSS](http://stackoverflow.com/questions/4465923/a-href-link-for-entire-div-in-html-css) — RaV, May 13 '16 at 08:28

RaV · Accepted Answer · 2016-05-13T08:26:54.947

Its easier other way around. Make <a> tag behave as <div>. Just use <a style="display: block;">.

If you can't do that, you can also use javascript:

<div onclick="location.href = 'www.yoursite.com';">

EDIT:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css.css"  >
    </head>
    <body>
        <a href="http://google.com">link</a>
        <br><br>
        <a class="button" href="http://google.com">button 1</a>
        <br>
        <a class="button" href="http://yourpage.com">button 2</a>
    </body>
</html>

This is css file:

a, a:hover, a:visited, a:active {
    color: inherit;
    text-decoration: none;
}

.button {
    width: 100px;    
    display: block;
    background-color: #cccccc; 
    cursor: pointer;
    text-align: center;
    border: 1px solid #666666;
    padding: 3px;
}

https://jsfiddle.net/xdps000s/

@Someone check this out https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css — RaV, Oct 12 '20 at 12:45

score 0 · Answer 2 · answered May 13 '16 at 08:18

What @RaV said + you can do something like this:

<a href="yourlink"><div>..........</div></a>

or you do something like this:

<div id="first">...</div>
<div id="second">...</div>
<script>
document.getElementById("first").addEventListener("click", function(){
//checks 
window.location.assign("yourlink");
});
// same for second div
</script>

How to make tag behave as tag?

2 Answers2

How to make
tag behave as tag?