头闻号

广州蝶贝蕾精细化工有限公司

化妆水|眼霜|护肤膏霜|护肤乳液|粉底|眼影

首页 > 新闻中心 > 科技常识:无需太多的代码利用超链接即可实现简单自定义漂亮复选框
科技常识:无需太多的代码利用超链接即可实现简单自定义漂亮复选框
发布时间:2024-11-19 11:35:37        浏览次数:3        返回列表

今天小编跟大家讲解下有关无需太多的代码利用超链接即可实现简单自定义漂亮复选框 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关无需太多的代码利用超链接即可实现简单自定义漂亮复选框 的相关资料,希望小伙伴们看了有所帮助。

今天突然就在想 html中的复选框可更改的样式有限 而且现在制作一个复选框需要写很多代码 然后我就想到一个简单的实现方式。完全证明了这是可行的。多的不说 直接贴出源代码 供大家参考。 实现效果: 未选中时:选中时: 图片背景: checkboxSel.jpg checkboxNoSel.jpg 代码: html代码片段: 复制代码代码如下: <a name="checkWeek"class="divCheckBoxNoSel"></a> 周一 javascript代码片段: 复制代码代码如下: $("a[name='checkWeek']").click(function(){ if($(this).hasClass('divCheckBoxSel')){ $(this).removeClass('divCheckBoxSel'); }else{ $(this).addClass('divCheckBoxSel'); } }); css代码片段: 复制代码代码如下: .divCheckBoxNoSel{ background: url("../image/checkboxNoSel.jpg") no-repeat center center; float:left; width:15px; height:15px; border:1px solid #BDBDBD; color:#FFF; } .divCheckBoxSel{ background: url("../image/checkboxSel.jpg") no-repeat center center; float:left; width:15px; height:15px; border:1px solid #BDBDBD; color:#FFF; } 区分每一个超链接就不在做出说明了可以有很多种方式,实际上内似的像单选框按钮也可以这样子轻松实现 从而节省时间。

来源:爱蒂网