首页 > 软件开发 > HTML >

如何设置一个按钮或者一个标签对应多个动作

来源:互联网 2023-03-16 19:12:56 283

一个标签或者按钮的的不同操作会有不同的相应事件,今天小编就来说说如何设置按钮的多个动作的响应事件,一起来看看吧!sYZ办公区 - 实用经验教程分享!

工具/原料

  • Sublime编辑器,浏览器

方法/步骤

  • 1

    我们新建一个html5文件,为其填写标准html代码,代码效果如下!sYZ办公区 - 实用经验教程分享!

    如何设置一个按钮或者一个标签对应多个动作sYZ办公区 - 实用经验教程分享!

  • 2

    新建一个按钮,并为其设置样式。sYZ办公区 - 实用经验教程分享!

    用浏览器打开网页,网页效果如下。sYZ办公区 - 实用经验教程分享!

    如何设置一个按钮或者一个标签对应多个动作sYZ办公区 - 实用经验教程分享!

    如何设置一个按钮或者一个标签对应多个动作sYZ办公区 - 实用经验教程分享!

  • 3

    为按钮设置“id=btt”,并编写script标签。sYZ办公区 - 实用经验教程分享!

    如何设置一个按钮或者一个标签对应多个动作sYZ办公区 - 实用经验教程分享!

  • 3相关内容未经授权抓取自百度经验
  • 4

    通过js获取到按钮标签元素,并将其赋值到变量btt里。sYZ办公区 - 实用经验教程分享!

    如何设置一个按钮或者一个标签对应多个动作sYZ办公区 - 实用经验教程分享!

  • 5

    在js中新建两个函数,函数aa将按钮的背景色变为黑色,函数bb将按钮的背景色变为红色。sYZ办公区 - 实用经验教程分享!

    如何设置一个按钮或者一个标签对应多个动作sYZ办公区 - 实用经验教程分享!

  • 6

    通过标签本身的悬浮触发事件我们调用aa()函数,悬浮后离开调用函数bb(),这样我们就用js实现了一个按钮或者一个标签对应多个动作。sYZ办公区 - 实用经验教程分享!

    如何设置一个按钮或者一个标签对应多个动作sYZ办公区 - 实用经验教程分享!

  • 7

    接下来我们刷新浏览器看下相关操作所对应按钮的不同相应状态吧!sYZ办公区 - 实用经验教程分享!

    如何设置一个按钮或者一个标签对应多个动作sYZ办公区 - 实用经验教程分享!

    如何设置一个按钮或者一个标签对应多个动作sYZ办公区 - 实用经验教程分享!

  • 注意事项

    • 以上为小编编程总结,希望能够帮到你!

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!sYZ办公区 - 实用经验教程分享!


    标签: 软件HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码