zoukankan      html  css  js  c++  java
  • checkbox用图片替换原始样式,并实现同样的功能

    1.结构:

    <div class="box1">
      <input/>
      <div class="box2">
        <img />
      </div>
    </div>

    2.css里:

      1)设置图片的div绝对定位,调整让它与原始input重合。

      2)设置input的宽高与图片的div一样大,这样精确一点。

      3)然后设置input:position:relative;再设置它的z-index,让它浮在图片那个div的上面。

      4)调整两个的位置,让之重合。

      5)设置input:opacity:0;

    3.jq里:

      

    $(function(){
        $("input").click(function(){
          if(this.checked){
            $(this).siblings(".box2").find("img").attr("src","被选中的图片的src");
          }else{
            $(this).siblings(".box2").find("img").attr("src","未被选中的图片的src");
          }
        })
      })

    注意siblings()里面只能有一个属性。不能siblings(".box2>img"),这样是错的。

      radio修改默认样式也是同样的道理,但是在jq里就要改一些东西了,

      如果想点击第一个radio之后,再点击同一个name的radio,它被选中之后,第一个radio背景变为没选中,而第二个radio背景变为被选中,还用上面的jq里 的代码是不能实现的,会出现第一个选中之后,再点第二个会让两个的背景都是被选中的图片。

      所以要在判定是否被选中的时候,加上:

    $(function(){
        $("input").click(function(){
          $("input").each(function(){
             if(this.checked){
              $(this).siblings(".box2").find("img").attr("src","被选中的图片的src");
             }else{
              $(this).siblings(".box2").find("img").attr("src","未被选中的图片的src");
             }
          })
       })
    })

      需要遍历一下input

  • 相关阅读:
    css3新特性合集
    前端面试必备的css盒子模型
    激动人心的第一天啊
    Simulink 自动代码生成原理
    什么是 Target Language Compiler
    A*算法 (MATLAB) -路径搜索
    路径搜索 – Dijkstra 算法 (MATLAB实现)
    客户端测试
    test
    【AtCoder Regular Contest 110 选做】D
  • 原文地址:https://www.cnblogs.com/zjjDaily/p/5964359.html
Copyright © 2011-2022 走看看