制作可点击的div

Question

我要使可点击的div。当前，仅当我单击红色矩形时它才起作用。如何使整个div可点击？

HTML

<div class="button">
    <a href="#">
        <p class="instagram-button">
            <i class="fab fa-instagram"></i>
            <span>Instagram Page</span>
        </p>
    </a>
</div>

CSS

.button {
    background-color: transparent;
    cursor: pointer;
    border: 2px solid #737373;
    margin: 20px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 40px;
}

.button span {
    font-size: 14px;
    color: #737373;
    text-transform: uppercase;
}

.fab {
    color: #737373;
    padding-right: 5px;
}

Answer 1

制作<a>标签display:block和100% height和width，使<a>标签的大小与{{1} }标签

Answer 2

function redirect(){
window.location = "yourWebsite";
}

.button {
    background-color: transparent;
    cursor: pointer;
    border: 2px solid #737373;
    margin: 20px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 40px;
}

.button span {
    font-size: 14px;
    color: #737373;
    text-transform: uppercase;
}

.fab {
    color: #737373;
    padding-right: 5px;
}

<div onclick='redirect()' class="button">
    <a href="#">
        <p class="instagram-button">
            <i class="fab fa-instagram"></i>
            <span>Instagram Page</span>
        </p>
    </a>
</div>

简单。只需重定向整个“部门”而不是“锚”即可。

（是的。应该抛出404错误，我将window.location设置为“ yourWebsite”，这是无效的。）

建议：要使锚点看起来更像按钮，请使用text-descoration: none从其下划线删除。

Answer 3

如果可以使用JQuery，请执行 $(".button").click(function (){window.location.href="/wherever/you/wish/to/go"})

还有onclick属性怎么了？

Answer 4

只需将事件侦听器添加到按钮.div并为该事件分配一个函数，该函数会将窗口重定向到新位置。