zoukankan      html  css  js  c++  java
  • js+css--单选按钮,自定义选中的颜色???(性别按钮,男女)

    效果图:

     html:

    <div class="item"><div class="rad"></div><span class="sexs">男</span></div>
    <div class="item check"><div class="rad"></div><span class="sexs">女</span></div>
     
    css:(用的less,自己分解出来)
    .item{
    margin-right:5px;
    display: inline-block;
    padding: 0 5px;
    font-size: 12px;
    color: #BFBFBF;
    font-family: "DIN";
    cursor: pointer;
    .rad{
    float: left;
    margin-top: 4px;
    margin-right: 4px;
    4px;
    height: 4px;
    padding: 2px;
    border: 1px solid;
    border-radius: 50%;
    background-clip: content-box;
    }
    .sexs{
    font-size: 12px;
    }

    }
    .check {
    color: #FB452F;
    position: relative;
    }
    .check .rad{
    border: 1px solid #BFBFBF;
    background-color: currentColor;
    }
     
     
    js:
    //点击单选按钮事件
    var items=document.getElementsByClassName("item");
    for(var i=0;i<items.length;i++){
    console.log(items[1].classList)
    items[i].onclick=function(){
    for(var j=0;j<items.length;j++){
    items[j].classList.remove("check");
     
    }
    $(this).addClass("check");
     
    }
     
    }
  • 相关阅读:
    SpringBoot
    SpringBoot
    MySQL
    Database
    Database
    MySQL
    Debug
    《mysql必知必会》学习_第18章
    C#中访问私有成员
    精彩语录收集
  • 原文地址:https://www.cnblogs.com/snowbxb/p/11757468.html
Copyright © 2011-2022 走看看