网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文:

 

标题 无需太多的代码利用超链接即可实现简单自定义漂亮复选框
范文
    今天突然就在想,html中的复选框可更改的样式有限,而且现在制作一个复选框需要写很多代码,然后我就想到一个简单的实现方式。完全证明了这是可行的。多的不说,直接贴出源代码,供大家参考。
    实现效果:
    名单
    代码:
    html代码片段:
    代码如下:
    <a name="checkWeek"></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;
    }
    区分每一个超链接就不在做出说明了可以有很多种方式,实际上内似的像单选框按钮也可以这样子轻松实现,从而节省时间。
随便看

 

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板,是学习及工作的有利工具。

 

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间:2025/5/24 18:31:34