CODEWITHSUNDEEP
htmlcss
nik
nik

Reputation: 411

How to make <div> tag behave as <a> tag?

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?

Upvotes: 3

Views: 5177

Answers (2)

RaV
RaV

Reputation: 1048

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/

Upvotes: 6

Bozidar Sikanjic
Bozidar Sikanjic

Reputation: 747

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>

Upvotes: 0

Related Questions