?? ?? ??? 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">
<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="??: 245px; ??: 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>(id? imgdata)? ????? ?????? ???? ??? ? ????.
<volist>? ???? ??? ???? ??? ?? ????. {$imgdata.name}? ?????? ?????.
?? ??: ??>
?? ??? ???? ??? ???? ????? WeChat ?? ??:
?? ?? ???? ????? CSS?? ??? HTML ??? ???? ????. ?? ??? ??? ? js? ?? Class? ???? ?? ??? ?? ? ????(? ?? ?? ??).
? CSS ??? ????? ??? ??? ?? ? ?? ?? ????? ?? CSS ? jQuery ??? ?? ????.
?? ??? ??? ???? CSS ??? ? ????? ?????.
??? ????.
光陰似箭催人老,日月如移越少年。
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 ??? ???? ??? ??? ?????.