itanℒ 2019-07-06 17:46 采纳率: 64.1%
浏览 609
已采纳

js解决标签类名的切换问题 .....

图片说明

点击按钮 背景变红 再点击按钮 背景变回原样

  • 写回答

2条回答 默认 最新

  • 毕小宝 博客专家认证 2019-07-06 18:13
    关注

    首先，对该按钮添加 id ,添加 事件，根据当前样式设置为另一种样式：

    <!DOCTYPE html>
<html>
<head>
<style type="text/css">

.grayClass{background-color: gray}
.redClass{background-color: red}

</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
function changeBackground(){
     var curClass = $("#setBackground").attr("class");
     if(curClass == 'grayClass'){
         $("#setBackground").attr("class",'redClass');
     }else{
         $("#setBackground").attr("class",'grayClass');
     }
   }
</script>
</head>
<body>
<button onclick="changeBackground();" id="setBackground" class="grayClass">设置背景</button>

</body>
</html>

    在 http://www.w3school.com.cn/tiy/t.asp?f=jquery_hide 可以查看代码效果。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

  • 关于jquery多个标签类名的切换..... css3 html5 javascript
    2019-07-06 20:22
    回答 2 已采纳 Insert title here 河南省开封市联通 河南省开封市联通 这个你试一下，是这种效果吗 ![图片说明](https://
  • 关于对象名.this和类名.this的问题
    2015-09-02 07:46
    回答 3 已采纳 就一个this，没有对象和类之分。也只能在定义类的时候内部使用。 1） this 关键字是类内部当中对自己的一个引用，可以方便类中方法访问自己的属性； 2）可以返回对象的自己这个类的引用，同时还可
  • Vue 获取 table表格中 某个 td DOM 的 实际列号（A,BC.)，请教 vue.js 前端 有问必答
    2022-06-18 00:17
    回答 5 已采纳 获取某个单元格未合并原始行列下标可以用下面函数（JS），ts的话题主转下对应的dom对象类，测试正常 <table border="1"> <tr><td id
  • vue.js实现标签页切换效果
    2020-10-18 11:29
    在前端开发中，标签页切换是一种常见的交互效果，它允许多个面板在同一个视图中通过标签进行切换。传统的JavaScript实现可能会涉及绑定事件到按钮上，并在点击事件中通过DOM操作改变元素的显示或隐藏状态。另一种...
  • java创建大小写类名后new对象. java
    2022-07-01 15:49
    回答 1 已采纳 很简单的道理，这和操作系统有关。因为windows或mac系统大小写不敏感，也就是说：当你的代码是你现在给出的代码时，（编译都是自上而下的）先会生成c.class，然后再生成C.class，又因为系统
  • 关于js给元素添加类名失效的问题 javascript 前端
    2022-03-31 17:02
    回答 3 已采纳 你打印下哪里的className有问题
  • elementui部分内置类名不起效 elementui vue.js
    2022-05-05 15:42
    回答 2 已采纳 mb-4 你自己添加的类。你没写样式 当然没有效果
  • 关于vue.js过渡css类名的理解(推荐)
    2020-10-20 01:27
    Vue.js 是一款流行的前端JavaScript框架，它提供了丰富的功能，其中包括过渡效果。过渡效果在Vue中主要依赖CSS类名和Vue的内置过渡组件来实现。在本文中，我们将深入理解Vue.js过渡CSS类名的工作原理。 首先，让...
  • Java 对象名.方法名与类名.方法名的使用 eclipse java
    2021-12-28 16:25
    回答 3 已采纳 类名.方法名就是对某个类的方法就行调用，一般格式如：classA.funB();类名.对象名就是对某个类中的某个对象(字段)进行访问或者赋值，比如对classB中的String类型 的s进行赋值：cl
  • Java 中 类名.class 的 class 是什么意思？ java
    2021-07-04 16:32
    回答 3 已采纳 其实任何一个类，都会有一个Class对象于这个类对应，在这个Class对象中，保存着实例化该类时所需要的基本信息，A.class 其实返回的是一个类 A 的 Class 对象获取Calss对象的方式主
  • taro 动态新增表单不生效 javascript react.js 前端
    2022-09-26 11:30
    回答 1 已采纳 this.setState({ shopArr: this.state.shopAr.concat(item) })
  • Vue.js 2.0 参考手册.CHM
    2022-03-23 09:30
    Vue.js 2.0 是一款流行的前端JavaScript框架，由尤雨溪开发，旨在简化Web应用程序的构建。Vue.js 2.0 强调组件化、响应式数据绑定和易用性，使得开发者能够快速构建高性能的用户界面。该“Vue.js 2.0 参考手册”提供...
  • Vue.js实现tab切换效果
    2020-10-16 15:56
    Vue.js是一个前端JavaScript框架，设计目的是为了解决MVVM模式的前端开发问题。它提供了数据驱动视图的理念，使得开发者可以更加关注数据的管理和业务逻辑的实现，而不必深入复杂的DOM操作。Vue的核心库只关注视图层...
  • Vue百度换肤.zip
    2022-05-21 12:17
    Vue.js 是一款流行的轻量级前端JavaScript框架，它以其易学易用、高效灵活的特点深受开发者喜爱。在“Vue百度换肤”这个项目中，我们可以看到一个基于Vue.js的皮肤切换功能的实现，这对于初学者来说是理解Vue指令...
  • Vue.js组件实现选项卡以及切换特效
    2020-10-16 15:56
    Vue.js 是一个流行的前端JavaScript框架，用于构建用户界面。在这个示例中，我们将讨论如何使用Vue.js组件来实现选项卡（Tab）功能，并添加切换特效。这个实现涉及到两个主要组件：`pane.js` 和 `tabs.js`。 首先，...
  • jQuery鼠标经过触发标签切换背景代码.zip
    2022-11-22 17:15
    在前端开发中，jQuery库经常被用来简化JavaScript的DOM操作，事件处理以及动画效果。在这个“jQuery鼠标经过触发标签切换背景代码”的示例中，我们将深入探讨如何利用jQuery实现一个功能，即当鼠标悬停在特定标签上...
  • 没有解决我的问题, 去提问

悬赏问题

  • ¥30 Matlab打开默认名称带有/的光谱数据
  • ¥50 easyExcel模板 动态单元格合并列
  • ¥15 res.rows如何取值使用
  • ¥15 在odoo17开发环境中，怎么实现库存管理系统，或独立模块设计与AGV小车对接？开发方面应如何设计和开发？请详细解释MES或WMS在与AGV小车对接时需完成的设计和开发
  • ¥15 CSP算法实现EEG特征提取，哪一步错了？
  • ¥15 游戏盾如何溯源服务器真实ip?需要30个字。后面的字是凑数的
  • ¥15 vue3前端取消收藏的不会引用collectId
  • ¥15 delphi7 HMAC_SHA256方式加密
  • ¥15 关于#qt#的问题：我想实现qcustomplot完成坐标轴
  • ¥15 下列c语言代码为何输出了多余的空格