假设我有一个容器,当我单击它时,该容器会指向另一个页面。但是,我希望禁用此容器中的某些元素,因此当我单击它们时,该链接将不起作用。我怎么做? 例如,在这里我要禁用容器的红色面。
a {
text-decoration: none;
color: white;
}
.container {
display: flex;
width: 400px;
height: 100px;
background-color: #ddd;
box-sizing: border-box;
padding: 5px;
}
.block-1 {
width: 50%;
height: 100%;
background-color: #3e3e3e;
text-align: center;
box-sizing: border-box;
padding-top: 20px;
}
.block-2 {
width: 50%;
height: 100%;
background-color: red;
text-align: center;
box-sizing: border-box;
padding-top: 20px;
}
<a href="#">
<div class="container">
<div class="block-1">Active</div>
<div class="block-2">Disabled</div>
</div>
</a>
Everything you put in
<a>
tag will be clickable, because "click" event is triggered actually on parent (<a>
tag) and not on what's inside it.您需要将其分开-只需将一个div设置为链接,将另一个不设置为链接。