zoukankan      html  css  js  c++  java
  • 切换功能更新的事件如下:

    js:

    navbarActiveSwitch();
    var isclick=false;
    $(function () {
    $("label").on({
    mouseover:function(){
    $(this).addClass('clicks');
    $(this).removeClass('point_amount_label');
    $(this).siblings('label').removeClass('clicks');
    $(this).siblings('label').addClass('point_amount_label');
    },
    mouseout:function(){
    if(!isclick){
    console.log(1);
    $(this).addClass('point_amount_label');
    $(this).removeClass('clicks');
    }
    },
    click:function(){
    $(".amount_input ").val('').focus();
    $('.red-text').text($(this).attr('amount'));
    $(this).siblings('label').removeClass('click');
    $(this).siblings('label').addClass('point_amount_label');
    $(this).siblings('label').children().remove();
    $(this).addClass('click');
    $(this).removeClass('point_amount_label');
    $(this).append('<div class="arrow-down"></div>');
    }
    });


    $('.amount_input').blur(function(){
    var val=$('.amount_input').val();
    $('.red-text').text(val);

    });


    })

    html:

    <label id="credit_amount_20" class=" click " amount="20">¥20.00<div class="arrow-down"></div></label>
    <label id="credit_amount_50" class="point_amount_label " amount="50">¥50.00</label>
    <label id="credit_amount_100" class="point_amount_label " amount="100">¥100.00</label>
    <label id="credit_amount_0" class="point_amount_label " >其他金额</label>

    css:

    .point_amount_label{
    120px;
    height: 40px;
    display: block;
    float: left;
    margin: 0 10px 0 0;
    text-align: center;
    border: 1px solid #e8e8e8;
    background-color: #f7f7f7;
    color: #999;
    cursor: pointer;
    line-height: 40px;
    }
    .click{
    border: 2px solid #1ba9d9;;
    color: #1ba9d9;
    120px;
    height: 40px;
    display: block;
    float: left;
    margin: 0 10px 0 0;
    text-align: center;
    line-height: 40px;
    }
    .clicks{
    border: 2px solid #1ba9d9;;
    color: #1ba9d9;
    120px;
    height: 40px;
    display: block;
    float: left;
    margin: 0 10px 0 0;
    text-align: center;
    line-height: 40px;
    }

  • 相关阅读:
    使用zipkin2在SpringCloud2.0环境下追踪服务调用情况
    Spring Cloud负载均衡:使用Feign作客户端负载均衡
    Spring Cloud负载均衡:使用zuul作服务器端负载均衡
    Word模板替换
    【转】Eureka集群
    巧用JavaScript语言特性解耦页面间调用(观察者模式)
    MySQL 视图触发器事务存储过程函数
    MySQL py模块的链接Navicat可视化工具
    MySQL 单表查询多表查询
    MySQL 表与表之间建立关系
  • 原文地址:https://www.cnblogs.com/zouyun/p/7791891.html
Copyright © 2011-2022 走看看