<style>
.custom-sax{ float:left; width:100%;}
.custom-sax li{ float:left; width:23%; padding-left:5px;}
.custom-sax li input{ display:none;}
.hq_hy:hover{border:2px solid red;}
.start{cursor: pointer;}
.end { border:2px solid #000;}
</style>
<script type="text/javascript">
$(function () {
var collection = $(".flag");
$.each(collection, function () {
$(this).addClass("start");
});
});
function dj(dom) {
var collection = $(".flag");
$.each(collection, function () {
$(this).removeClass("end");
$(this).addClass("start");
});
$(dom).removeClass("start");
$(dom).addClass("end");
}
</script>
<div class="custom-sax">
<p class="line-item-property__field">
<label>Eye Color</label><br>
<li>
<input required class="required" type="radio" name="properties[Eye Color]" value="Default" checked id="Default">
<label for="Default" class="flag hq_hy" onclick="dj(this);"><img class="tmlazy radio_image" alt="Default" src="https://www.sexdollie.com/wp-content/uploads/2018/09/same-as-pic-100x100.jpg"></label><br>
<span>Default</span>
</li>
<li>
<input required class="required" type="radio" name="properties[Eye Color]" value="Brown" id="Brown">
<label for="Brown" class="flag hq_hy" onclick="dj(this);"><img class="tmlazy radio_image" alt="Default" src="https://www.sexdollie.com/wp-content/uploads/2018/08/option-eye-brown.jpg"></label><br>
<span>Brown</span>
</li>
<li>
<input required class="required" type="radio" name="properties[Eye Color]" value="Blue" id="Blue">
<label for="Blue" class="flag hq_hy" onclick="dj(this);"><img class="tmlazy radio_image" alt="Default" src="https://www.sexdollie.com/wp-content/uploads/2018/08/option-eye-blue.jpg"></label><br>
<span>Blue</span>
</li>
<li>
<input required class="required" type="radio" name="properties[Eye Color]" value="Green" id="Green">
<label for="Green" class="flag hq_hy" onclick="dj(this);"><img class="tmlazy radio_image" alt="Default" src="https://www.sexdollie.com/wp-content/uploads/2018/08/option-eye-green.jpg"></label><br>
<span>Green</span><br>
</li>
</p>
shopify 属性添加图片及样式
最新推荐文章于 2024-11-09 18:18:36 发布
This blog presents a web - based eye color selection interface. It uses CSS for layout and style, such as floating elements and setting border styles on hover. JavaScript is used to add and remove classes when an option is clicked, enabling interactive selection of eye color options.
6428

被折叠的 条评论
为什么被折叠?



