zoukankan      html  css  js  c++  java
  • 使用classList来实现两个按钮样式的切换

    classList属性的方法:add();remove();toggle();

    描述,在一些页面我们需要使用两个按钮来回切换,如图:

    我们要使用到add()和remove()方法

    html部分:

    <div class="login-title">

    <a href="javascript:void(0)" class="mya1" id="mya" onclick="myonclick()">注册</a>

    <a href="javascript:void(0)" class="mya2" id="myaa" onclick="myonclick1()">登陆</a>

    </div>

    js部分: funcction myonclick(){

    document.getElementById("mya").classList.remove("newClassName1");

    document.getElementById("myaa").classList.remove("newClassName");

    }

    function myonclick1(){

    document.getElementById("mya").classList.add("newClassName1");

    document.getElementById("myaa").classList.add("newClassName");

    }

     

    css部分:

    .login-title{

    200px;

    height:200px;

    margin: 0 auto;

    background-color:antiquewhite;

    }

    .mya2{

    padding: 0 20px 10px 20px;

    color:#FFFFFF;

    font-size:22px;

    text-decoration:none;

    }

    .mya1{

    padding:0 20px 10px 20px;

    color:#7F4A88;

    font-size:22px;

    text-decoration:none;

    border-bottom:2px solid #7F4A88;

    }

    .newClassName{

    padding:0 20px 10px 20px;

    color:#7F4A88;

    font-size:22px;

    text-decoration:none;

    border-bottom:2px solid #7F4A88;

    }

    .newClassName1{

    padding: 0 20px 10px 20px;

    color:#FFFFFF;

    font-size:22px;

    text-decoration:none;

    }

     

  • 相关阅读:
    mysql数据库之多表查询
    mysql数据库之单表查询
    mysql数据库之表和库
    mysql数据库之windows版本
    mysql数据库之linux版本
    mysql数据库之mysql下载与设置
    python基础之逻辑题(3)
    python基础之逻辑题(2)
    python基础之逻辑题(1)
    spring boot统一异常处理
  • 原文地址:https://www.cnblogs.com/ZM-ONE/p/8337403.html
Copyright © 2011-2022 走看看