首先，先贴这是相册的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代码。
无论如何，感谢了。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
https://codepen.io/zengkan070...
This is a simply written demo. The principle is: set a separate element on the picture to represent the check mark. Click to control its display and hiding.
First write a css class, such as
.ok，负责钩号的位置然后再给所有的
am-gallery-item类添加点击事件当点击该类的时候给该元素添加
.okclassIf you want to know which elements are selected, just get all elements with
.okclassA selection layer is covered over the photo, with customized effects and hidden by default;
Whether the photo is selected or not, is bound to a Boolean array;
After the photo is clicked, the corresponding object of the array is inverted and bound to the overlay ;
A little rough idea, I don’t know if it can help the respondent. Maybe there are ready-made components, so there is no need to reinvent the wheel.
The ticking operation you want can be achieved with only html+css.
The structure can be used:<label><input checkbox><p>
checkbox is hidden and used to mark whether it is selected;
The p behind it is used as a check mark, and :checked and the sibling selector '+' are used to determine whether to display it;
label modifies the checkbox, and the picture can be placed in the background of the label, which has the following benefits
Similar to the lazyload effect, like the images behind the pager are requested only after they are used;
background-size: contain can make the image fully displayed;
<p style="background-image:...;width:..,height:.."><p class="mask"></p></p>
Make one In the two-layer structure, the outermost p background image is set to a different background image, and a p is placed in the inner layer with a height and width of 100%, which is used for masking effects and is hidden by default. When the outer p is clicked, a similar effect occurs when the p display of the inner layer is set through js.