首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JQuery on_click: removeClass in a button,然后toggleClass另一个按钮(只有一个按钮有这个类)

JQuery是一种流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画效果等操作。在这个问答内容中,我们需要实现点击一个按钮时移除一个类,并且切换另一个按钮的类。

首先,我们需要在HTML中定义两个按钮,一个有特定的类,另一个没有该类。例如:

代码语言:txt
复制
<button id="button1" class="active">按钮1</button>
<button id="button2">按钮2</button>

然后,在JavaScript中使用JQuery来实现点击按钮时的操作。我们可以使用on()方法来绑定点击事件,并使用removeClass()toggleClass()方法来添加或移除类。具体代码如下:

代码语言:txt
复制
$(document).ready(function() {
  $("#button1").on("click", function() {
    $(this).removeClass("active");
    $("#button2").toggleClass("active");
  });
});

上述代码中,$(document).ready()函数用于确保页面加载完成后再执行JavaScript代码。$("#button1")选择器选中id为"button1"的按钮,并使用on()方法绑定点击事件。在点击事件的回调函数中,使用removeClass("active")方法移除按钮1的"active"类,并使用$("#button2")选择器选中id为"button2"的按钮,并使用toggleClass("active")方法切换按钮2的"active"类。

这样,当点击按钮1时,按钮1的"active"类将被移除,按钮2的"active"类将被添加或移除,实现了题目要求的效果。

关于JQuery的更多信息,你可以参考腾讯云的相关产品和文档:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Web前端JQuery面试题(一)

:first-child 匹配每个父元素下的第一个子元素 :last-child 匹配每个父元素下的最后一个子元素 :only-child 匹配父元素中只有唯一的子元素,如果父元素中有多个子元素,就不会被匹配...匹配所有复选框 :submit 匹配所有提交按钮 :image 匹配所有图像 :reset 匹配所有重置按钮 :button 匹配所有按钮 :file 匹配所有文本域 :hidden 匹配所有不可见元素...last').addClass(function() {}) removeClass([class]); 删除指定 removeClass(function(index, class)) 删除指定...toggleClass(class); 切换效果,如果有这个属性值就删除如果没有就添加 toggleClass(class, switch); switch为ture添加class,反之删除 toggleClass...$('li').first() last():获取最后一个元素 $('li').last() hasClass(class):判断是否 filter(expr):选出表达式匹配的元素 is

2.9K20

Web前端JQuery面试题(二)

var txt = $("#text").val(); $("#text").toggleClass("txtClick").html("点击后切换样式"); 4.jquery选择器哪些?...jquery选择器:基本选择器,层次选择器,过滤选择器,表单选择器四大。...:first-child 匹配每个父元素下的第一个子元素 :last-child 匹配每个父元素下的最后一个子元素 :only-child 匹配父元素中只有唯一的子元素,如果父元素中有多个子元素,就不会被匹配...:reset 匹配所有重置按钮 :button 匹配所有按钮 :file 匹配所有文本域 5.请问你能写出dom结构吗?...切换样式 toggleClass(class) 如果有该类class就删除,如果没有就添加 进行方法间的切换效果 删除 removeClass(class); 创建节点元素,动态创建页面元素

1.9K30

jQuery基础图文系列

addClass(name) removeClass(names) hasClass(name) toggleClass(names][,switch]) jquery是一款JavaScript库...() 类似 :nth-child,只有符合type类型 :nth-last-of-type() 和 nth-last-child() 类似,从最后一个子元素开始算 :first-of-type 选择一个上级元素的第一个同类子元素...html() 数组或返回匹配的元素集合中的html内容 insertAfter() 把匹配的元素插入到另一个指定的元素集合的后面 insertBefore() 把匹配的元素插入到另一个指定的元素集合的签名...removeClass() 从被选元素删除一个或多个 toggleClass() 对被选元素进行添加/删除的切换操作 css() 设置或返回样式属性 $("p").css("background-color...(){ 加入的内容 }); 简写 jQuery(function($) { // 你可以在这里继续使用$作为别名... }); jQuery 对象中元素的个数,开发中通常要用来计算元素个数,然后做循环等超值

4.5K10

jQuery的基本操作

"div"); 结果: [DIV1,DIV2] .class   .class //一个用于搜索的,一个元素可以多个,只要有一个符合就能被匹配到...参数class描述 删除匹配元素的所有 jQuery代码 $("p").removeClass(); 回调函数描述: 删除最后一个元素上与前面重复的class jQuery代码 $("li:last...参数为这个对象原先的class属性值· 参数class描述 从匹配的元素中删除"selected" jQuery代码 $("p").removeClass("selected"); 参数class...描述 删除匹配元素的所有 jQuery代码 $("p").removeClass(); 回调函数的描述 删除最后一个元素上与前面重复的class jQuery代码 $("li:last")....removeClass(function(){ return $(this).prev().qttr("class"); })   toggleClass(class|fn[,sw]) //概述

7.5K20

jQuery 常用方法

Ajax 交互 选择器 符号$表示 jQuery 对象,$函数通常也被称为 jQuery 的工厂函数,jQuery 的操作基本上都以$( )开始,所有选择器都放在这个括号中,例如$("#title")将返回一个...:image 集合元素 $(":image") 选取所有的图像按钮 :reset 集合元素 $(":reset") 选取所有的重置按钮 :button 集合元素 $(":button") 选取所有的按钮....addClass('cls'); 移除多个 .removeClass('cls1, cls2'); 创建节点 var $li = $("苹果"); 删除节点 .remove()....hasClass("cls"); 隐藏 / 显示该元素 .toggle(); 切换这个 cls .toggleClass(‘cls’); 筛选元素 .filter(); 向每个匹配元素追加内容 ....append(); 把所有匹配元素追加到另一个指定的元素元素集合中 .appendTo(); 在被选元素的开头插入指定内容 .prepend(); $("p").prepend("love

2.6K50

jQuery基础系列

addClass(name) removeClass(names) hasClass(name) toggleClass(names][,switch]) jquery是一款JavaScript库...() 类似 :nth-child,只有符合type类型 :nth-last-of-type() 和 nth-last-child() 类似,从最后一个子元素开始算 :first-of-type 选择一个上级元素的第一个同类子元素...html() 数组或返回匹配的元素集合中的html内容 insertAfter() 把匹配的元素插入到另一个指定的元素集合的后面 insertBefore() 把匹配的元素插入到另一个指定的元素集合的签名...() 从所有匹配的元素中删除全部或者指定的 replaceAll() 用匹配的元素替换所有匹配到的元素 replaceWith() 用新内容替换匹配的元素 text() 数组或返回匹配元素的内容 toggleClass...removeClass() 从被选元素删除一个或多个 toggleClass() 对被选元素进行添加/删除的切换操作 css() 设置或返回样式属性 $("p").css("background-color

2.6K20

javascript操作元素的css样式

当中一种办法是改变页面元素的CSS(Class),这在传统的Javascript里,我们一般是通过处理HTML Dom的classname特性来实现的;而jQuery里提供三种方法来实现这个功能,尽管它们和传统方法的思想相通...CSS的名称 2. removeClass() – 移除CSS $(“#target”).removeClass(“oldClass”); //#target 指的是须要移除CSS的元素的ID...在实际运用中,我们经常先定义好这些CSS然后通过Javascript事件触发(比方点击某个链接)来改变页面元素样式。...此外,jQuery还提供一种方法 hasClass(“className”)用来推断某个元素是否已经被赋予某个CSS。 以下是一个完整的样例。 <!...").removeClass("up"); $("#soccer").toggleClass("up"); //$("p:first").removeClass("intro"); } </script

1.1K20

前端(四)-jQuery

,且是最后指定的那个,特点:必须要等待网页元素全部加载才执行 // window.onload = loadOne; // window.onload = loadTwo; //只有后面这个才有效...基本操作 3.1 样式操作 方法(已声明好的外部样式名,多个使用空格分割) 说明 addClass("样式名") 添加样式 removeClass("样式名") 移除样式 toggleClass(...li和最后一个li //先选取第一个li,然后end()清除.first()的过滤,回到$(".gameList li"),在选取last() //相当于两条语句: /* $(".gameList li...()区别 方法 说明 toggle() 相当于show()和hidden() toggle(函数) 复合事件 随着鼠标的点击自动切换函数 toggleClass(名) 相当于addClas("名"...).prop("checked")); }); //需求2:当下面按钮一个没被选中,上面的全选按钮也取消选中状态 $("#t_body input:checkbox").click(

8.5K30

jQuery(一)

即全局jQuery对象 对象 jQuery对象jQuery函数返回的对象,一个jQuery对象表示一组文档元素,即jQuery集,包装集,jQuery结果 选中元素 传递css选择器给jQuery函数时..." + n; }); // 其中n表示当前遍历到的索引值 // 删除css $('p').removeClass("hilite"); // 删除一个 $('p').removeClass('hilite...first'); // 删除多个 $('p').removeClass((n) => { return "section" + n }); // 通过函数删除 $('p').removeClass(...); //删除所有的自定义 // 切换css,即第一次执行显示,第二次执行消失 $('tr:odd').toggleClass('oddrow'); // 匹配列表中的奇数序列的元素,然后进行添加...$('h1').toggleClass('big bold'); //切换为这个 $('h1').toggleClass((n) => { return "big bold h1-" + n });

2.1K40
领券