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;
    }

  • 相关阅读:
    LeetCode 275. H-Index II
    LeetCode 274. H-Index
    LeetCode Gray Code
    LeetCode 260. Single Number III
    LeetCode Word Pattern
    LeetCode Nim Game
    LeetCode 128. Longest Consecutive Sequence
    LeetCode 208. Implement Trie (Prefix Tree)
    LeetCode 130. Surrounded Regions
    LeetCode 200. Number of Islands
  • 原文地址:https://www.cnblogs.com/zouyun/p/7791891.html
Copyright © 2011-2022 走看看