首先，先贴这是相册的HTML
<p class="main-body">
<ul data-am-widget="gallery" class="am-gallery am-avg-sm-2 am-avg-md-3 am-avg-lg-4 am-gallery-bordered" data-am-gallery ="{ }" id="uldata">
<volist name="imgdata" id="imgdata">
<li>
<p class="am-gallery-item" id="{$imgdata.id}">
<a href="{$url}{$imgdata.image}">
<img class="imgyes" src="{$url}{$imgdata.image}" alt="{$imgdata.note}" id="imgid{$imgdata.id}" style="width: 245px;height: 147px"/>
<h3 class="am-gallery-title">{$imgdata.name}</h3>
<p class="am-gallery-desc">{$imgdata.time|date='Y-m-d H:i:s',###}
</p>
</a>
</p>
</li>
</volist>
</ul>说明一些：上面代码中，<ul>（id是imgdata）内是前端框架的规范，可以无视。
<volist>是后端用于输出的，也可以无视。{$imgdata.name}也是后端中使用的。
相册图片：
想实现的类型微信的点击相应图片并打钩的效果：
我现在大概的思路是在CSS中写打钩的HTML效果。点击相应图片之后通过js添加Class实现打钩的效果（只能打钩一个）。
因为我CSS知识比较薄弱，现在希望能有更好的实现思路或者是相应CSS与jQuery代码。
其实更多希望能有实现图片打钩的CSS代码。
无论如何，感谢了。
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
https://codepen.io/zengkan070...
간단하게 작성된 데모입니다. 원칙은 체크 표시를 나타내기 위해 그림에 별도의 요소를 설정하는 것입니다. 표시 및 숨기기를 제어하려면 클릭하세요.
먼저 후크 위치를 담당하는
.ok와 같은 CSS 클래스를 작성합니다.그런 다음 모든
am-gallery-item클래스에 클릭 이벤트를 추가합니다요소를 클릭하면 요소에
.ok클래스를 추가합니다.ok，负责钩号的位置然后再给所有的
am-gallery-item类添加点击事件当点击该类的时候给该元素添加
.ok类如果你想知道哪些元素被选中，只需要获取所有拥有
어떤 요소가 선택되었는지 알고 싶다면.ok.ok클래스를 사용하여 모든 요소를 가져오세요🎜선택 레이어는 사용자 정의 효과로 사진 위에 덮여 있으며 기본적으로 숨겨집니다.
사진 선택 여부에 관계없이 부울 배열에 바인딩됩니다.
사진을 클릭하면 배열의 해당 개체가 반전됩니다. ;
약간의 대략적인 생각이지만, 응답자에게 도움이 될 수 있을지 모르겠습니다. 이미 만들어진 구성 요소가 있으므로 바퀴를 다시 만들 필요가 없을 수도 있습니다.
원하는 틱 작업은 html+css만으로 가능합니다.
다음 구조를 사용할 수 있습니다:<label><입력 확인란><p>
체크박스는 숨겨져 있으며 선택 여부를 표시하는 데 사용됩니다.
뒤에 있는 p는 체크 표시로 사용되며, :checked 및 형제 선택기 '+'는 표시 여부를 결정하는 데 사용됩니다.
레이블은 체크박스를 수정합니다. 사진을 라벨 배경에 배치할 수 있으며 다음과 같은 이점이 있습니다
페이저 뒤의 이미지는 사용된 후에만 요청되는 것처럼 지연 로드 효과와 유사합니다.
배경 크기: 이미지를 완전히 표시할 수 있습니다.
<p style="Background-image:...;width:..,height:.."><p class="mask"></p></p>
만들기 2레이어 구조에서는 가장 바깥쪽에 있는 p 배경 이미지가 다른 배경 이미지로 설정되고, p는 높이와 너비가 100%인 내부 레이어에 배치되는데, 이는 마스킹 효과에 사용되며 기본적으로 숨겨집니다. 바깥쪽 p를 클릭하면 js를 통해 안쪽 레이어의 p 표시를 설정해도 비슷한 효과가 발생합니다.