效果图
源代码
<!DOCTYPE html>
<html lang="zh-CN">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<head></head>
<style>
*{
margin: 0;
padding: 0;
}
div{
display: inline-block;
width: 50px;
margin-right: 100px;
height: 300px;
}
a{
width: 50px;
height: 50px;
display: block;
border:1px solid #000;
cursor: pointer;
}
a.active{
border:1px solid #f00;
}
canvas{
/*border:1px solid #000;*/
position: absolute;
top: 0;
left: 56px
}
</style>
<body>
<input name="question1" type="hidden">
<input name="question2" type="hidden">
<input name="question3" type="hidden">
<input name="question4" type="hidden">
<div class="J_div1">
<a data-conkey="question1"></a>
<a data-conkey="question2"></a>