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），但如果是第二个按钮，则不会显示此网址。我希望在所有情况下都有相同的行为 - 在所有情况下，用户都看不到URL，或者在所有情况下用户都看到它。

我怎样才能实现它？

Answer 1

其他方式更容易。将<a>代码设置为<div>。只需使用<a style="display: block;">。

如果你不能这样做，你也可以使用javascript：

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

编辑：

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

这是css文件：

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/

Answer 2

@RaV说什么+你可以这样做：

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

或者你做这样的事情：

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

如何使<div>标记表现为<a> tag?

2 个答案: