我使用 div 创建了一个圆圈。但我正在努力将圆形边框转换为可点击的功能。
我的主要实现重点是 React。但是如果我也获得了基本 JS 中的逻辑，那么我会将其转换为 React。这也是我标记 React 的原因。
我想要实现的是:有 4 个圆形边框部分。在左上边框和左下边框上，类似右上边框和右下边框。我希望它转换为可点击的 4 个不同功能。 预览如下
function redClick(){
}
function blueClick(){
}
function greenClick(){
}
function orangeClick(){
}.circle
{
border-radius:30px;
width:35px;
height:35px;
border:4px red solid;
border-top:4px solid red;
border-right:4px solid green;
border-bottom:4px solid blue;
border-left:4px solid orange;
transform:rotate(45deg);
}<html>
<body>
<div class="circle">
</div>
<body>
</html>点击红色时，它应该调用红色函数，并且对于所有函数都类似
最佳答案
你应该把宿舍分开。它使得检测您点击的区域变得更加容易。我这里有一个例子。
$('.top-left').click(function() {
console.log("top left")
});
$('.top-right').click(function() {
console.log("top right")
});
$('.bottom-left').click(function() {
console.log("bottom left")
});
$('.bottom-right').click(function() {
console.log("bottom right")
});#circle-container {
width: 200px;
height: 200px;
position:relative;
z-index:1;
}
.fill-circle {
width: 190px;
height: 190px;
position:absolute;
z-index:5;
background-color:#fff;
border-radius:190px;
margin:5px 0px 0px 5px;
background-image: url('https://darko.co.za/circle-fill.png');
background-repeat:no-repeat;
}
.quarter {
position: relative;
width: 100px;
height: 100px
}
.quarter-fill {
position:absolute;
width: 90px;
height: 90px;
background-color:#fff;
}
.top-left-fill {
bottom:0;
right:0;
border-top-left-radius: 200px;
}
.top-right-fill {
bottom: 0;
left: 0;
border-top-right-radius: 200px;
}
.bottom-left-fill {
top: 0;
right: 0;
border-bottom-left-radius: 200px;
}
.bottom-right-fill {
top: 0;
left: 0;
border-bottom-right-radius: 200px;
}
.top-left {
border-top-left-radius: 200px;
background: #1fb14e;
float: left
}
.top-right {
border-top-right-radius: 200px;
background: #1ba8e0;
float: right
}
.bottom-left {
border-bottom-left-radius: 200px;
background: #fecc0b;
float: left
}
.bottom-right {
border-bottom-right-radius: 200px;
background: #de232c;
float: right
}<div id="circle-container">
<div class="quarter top-left">
<div class="quarter-fill top-left-fill"></div>
</div>
<div class="quarter top-right">
<div class="quarter-fill top-right-fill"></div>
</div>
<div class="quarter bottom-left">
<div class="quarter-fill bottom-left-fill"></div>
</div>
<div class="quarter bottom-right">
<div class="quarter-fill bottom-right-fill"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>关于javascript - 将圆形边框转换为可点击功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50207948/