• jquery点击来回切换


      做个笔记偶尔用有时记不住

    方法一:

    <div id="test">
        test
    </div>

     $('#test').mouseover(function () {
            $(this).addClass('a')
      }).mouseout(function () {
           $(this).removeClass('a')
      })

    方法二:

    <div class="people_state">设为管理员</div>

    <div class="people_state">设为管理员</div>

    <js>

    $(".people_state").each(function() {

          $(".people_state").bind("click");

          $(".people_state").toggle(function() {

          $(this).html("取消管理员");

          },function() {

         $(this).html("设为管理员");

     })

    });

    方法三:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <style>
    div{
    height: 600px;
    300px;
    background-color: orange;
    }
    .a{
    background-color: blue;
    }
    </style>
    <title>Title</title>
    <script src="jquery-3.1.1.min.js"></script>
    </head>
    <body>
    <div id="d">
    sakdas
    </div>
    </body>
    <script>
    $('#d').mouseover(function () {
    // 俩个状态来回切换
    $(this).toggleClass('a')
    }).mouseout(function () {
    $(this).toggleClass('a')
    })
    </script>
    </html>

    方法四:

    <html>

    <div class="people_state"    res="0">设为管理员</div>

     

    <div class="people_state"    res="0">设为管理员</div>

    <js>

    $(".people_state").click(function() {

        var  i=$(this).attr("res");

        if(i==0){

               $(this).attr("res","1");

               $(this).html("");

               $(this).html("取消管理员");

        }else{

              $(this).attr("res","0");

              $(this).html("");

              $(this).html("设为管理员");

        }

    });

  • 相关阅读:
    Java——Java重写和重载
    Java——继承
    Java——Java异常(不完整)
    Java——Stream、File、IO
    前端规范整理
    网站前端优化 -saveForSelf
    PhoneGap与WAP站静态化
    js执行顺序
    前端优化-内容优化-郑钧
    HTTP协议-标签简介
  • 原文地址:https://www.cnblogs.com/zzguan/p/11506490.html
Copyright © 2020-2023  润新知