如何在多个按钮上切换相同的fa图标？
在多个按钮上切换相同的fa图标，可以通过以下步骤实现：
- 首先，确保你已经引入了Font Awesome图标库的CSS文件。你可以在Font Awesome官方网站上下载最新版本的CSS文件，并将其链接到你的HTML文件中。
- 在HTML文件中，为每个按钮添加一个共同的类名，以便于选择它们。例如，你可以给每个按钮添加一个名为"icon-button"的类名。
- 使用JavaScript或jQuery来处理按钮的点击事件。当按钮被点击时，你可以通过修改按钮的类名或内部HTML来切换图标。
- 使用JavaScript的示例代码如下：
- 使用JavaScript的示例代码如下：
- 使用jQuery的示例代码如下：
- 使用jQuery的示例代码如下：
- 在CSS文件中，定义不同类名对应的图标样式。你可以使用Font Awesome提供的类名来设置图标样式，例如"fa"、"fa-plus"、"fa-minus"等。
- 在CSS文件中，定义不同类名对应的图标样式。你可以使用Font Awesome提供的类名来设置图标样式，例如"fa"、"fa-plus"、"fa-minus"等。
这样，当你点击按钮时，它们上面的fa图标就会根据切换逻辑进行相应的变化。
关于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体品牌商，建议你参考腾讯云官方文档或咨询腾讯云的技术支持团队，以获取与云计算相关的产品和服务信息。
相关·内容
2回答
jQuery Accordion在点击时改变字体的图标类
javascript、jquery、css、accordion、font-awesome
我有一个问题是关于我找到的一个简单的jQuery手风琴。
我想使用Font Awesome图标来用加号和减号图标表示活动/非活动状态。在my JSFiddle中，您可以看到带有加号图标的手风琴标题。当你点击一个标题时，"fa-plus“类需要更改为"fa-minus”。
我已经用add和removeClass做了一些测试，但是我不能让它工作。我真的是一个jQuery/javascript菜鸟！希望你们能帮助我:-)。
jQuery('.accordion dt').click(function() {
jQuery('.accordion dt
浏览 0提问于2014-01-16得票数 3
回答已采纳
1回答
accordian在段落和图标之间切换
javascript、html、css、class、toggle
我试着创建一个手风琴，点击标题，一个段落会出现，加号图标也会消失，负图标出现。i设置style.display在块和零之间改变，使用如果其他匹配段落。我根据类名获取元素，并通过for循环获取access元素。其思想是改变p的2种状态(p是隐藏，然后+图标是块，p是块+图标是隐藏，负图标是块)。
var block = document.getElementsByClassName("block")
var p = document.getElementsByClassName("content")
var plus = document.getElement
浏览 4提问于2022-05-29得票数 0
4回答
使用jQuery选择只单击li
jquery、html、css
我想显示单击的ul，而不是每个ul。ul有类slide-in。
如果有人能帮我，我会非常感激的，因为我被困住了。
下面是我的代码，让您检查一下：
$('.gallery li.slide-in').on("click", function() {
var ele = $('.icon-to-change');
$(this).slideToggle();
if (ele.hasClass('fa-plus')) {
ele.removeClass('fa-plus')
.addC
浏览 1提问于2018-03-12得票数 1
回答已采纳
2回答
单击选项卡时如何更改图标？
jquery
我有一个小的问题，一些标签，我试图将图标更改为负图标时，它和一个加号图标，当它不对，如果这是有意义的。
我已经让它更改为减号按钮，当你点击它，但它不会改变，当你点击另一个选项卡。
$('ul.nav-tabs li').click(function(){
$(this).find('i.tabIcon').removeClass('fa-plus').addClass('fa-minus');
$('ul.nav-tabs li:not(active)').removeClass('fa-p
浏览 1提问于2017-05-23得票数 1
回答已采纳
2回答
如何在出色的字体图标jquery之间切换
javascript、jquery、font-awesome
我想切换到字体很棒的图标。我已经尝试过 $(document).ready(function () {
$("#minus").click(function () {
$("#tog").slideToggle();
if ( $("#minus").hasClass("fas fa-minus")) {
$("#minus").addClass("fas fa-plus")
}else {
浏览 12提问于2020-03-19得票数 1
回答已采纳
1回答
发出显示/隐藏图标，折叠所有div
javascript、jquery、html
下面的代码包含一些嵌套的DIVs。
DIVs有加号和减号字体，很好的图标来展开和折叠它们。
您可以使用页面顶部的按钮切换DIVs的可见性。
蓝色按钮和/或加/减图标可以切换父级(Activities和Animals & Nature)的可见性。
绿色按钮切换可见的“子”div，其中包含小标题，如award-medal，event等。
我遇到的问题是，当使用绿色加/减图标切换子div的可见性时，如果您单击award-medal标题的绿色负号，它也会折叠event的div。
我想知道是否有任何方法可以将折叠功能拆分出去，这样绿色切换按钮仍然能像现在一样工作，但是每个gree加/减图标控制与
浏览 0提问于2018-04-09得票数 2
回答已采纳
1回答
字体-具有滑动JQuery代码错误的强大功能
jquery、css、font-awesome
我使用Font Awesome (见：)创建了一个JQuery滑动导航。
现在，在添加CSS时，由于这是第三方网页字体图标，我想知道如何使用+和-图标将其应用到我自己的代码中。
+ -> <i class="fa fa-plus"></i> fa-plus
- -> <i class="fa fa-minus"></i> fa-minus
我的jQuery代码是。
$("#toggle > li > div").click(function(){
if(false
浏览 1提问于2014-03-10得票数 0
1回答
如何在dropdown控件中加载所有字体强大的图标
jquery、font-awesome
我想在dropdown中添加所有的font-awesome图标是否有任何方法来读取font-awesome.css中的所有图标和绑定它的下拉控件。 例如。使用任何正则表达式示例或任何其他方式读取选择控件中的所有图标class和绑定。 目前，我不得不添加静态，如下面的例子，是否有任何方法读取动态所有类。 $(document).ready(function() {
var iconArray = new Array(
"fa-arrow-circle-down",
"fa-user",
"fa-plus&#
浏览 10提问于2020-04-22得票数 0
3回答
在jquery中使用fontawesome
javascript、jquery、font-awesome
下面有我想用字体更改+和-的代码-- <i class="fa fa-plus"></i>和<i class="fa fa-minus"></i>
$( ".filter-tag-group .tag-group" ).each(function( index ) {
var check_this=this;
$(this).find(".show_filter_content").on( 'click', function() {
浏览 1提问于2018-02-21得票数 0
回答已采纳
2回答
点击切换类
javascript、jquery
我正在构建一个常见问题，在每个问题后面都有一个'+‘图标，点击它之后，答案就会出现，图标就会变成'-’图标。问题是，当您单击下一个问题时，前面问题的图标不会切换回原始/前一个/其他图标。
参见示例：
HTML
<div class="faq">
<div class="question">Q <i class="fas fa-plus"></i></div>
<span class="answer">A</span>
</d
浏览 1提问于2019-03-19得票数 0
回答已采纳
1回答
单击<a>内的图标图标时显示/隐藏手风琴内容
javascript、jquery
我有一个简单的手风琴，它是构建jquery的。这似乎很好，但有几个问题。
我主要需要做的是，当有人点击手风琴上的标题文本时，当我点击+/-图标时，它应该重定向到那个链接，它应该切换内容。我确实试图触发对图标的单击，在这种情况下，它完全重定向而不显示内容。
此外，在默认情况下，如何显示所有内容，而不是单击？
下面是我的代码
HTML
<div class="accordion-container">
<div class="set">
<a href="http://test.com">
浏览 2提问于2020-04-20得票数 1
回答已采纳
1回答
同时JS/jQuery多个类别切换(+/-)，以及单个类别(+/-)的单个切换
javascript、jquery
我在这里很难用js/jQuery编码..。我让我的类别一次从一个按钮，并使他们各自的图格战。
但是我对+/-图标有一个问题，它就像一个用户界面，上面写着你的类别，它是封闭的还是开放的。如果我单独访问每个功能，没有问题，但是如果我混合使用功能，例如，它会说一个类别是关闭的(没有显示)，我有(-折叠)而不是(+是展开的)。
这是我的密码：
//individual toogle of category
$(".inside-cgs_main").on("click", function () {
if ($(this).hasClass("fa-p
浏览 2提问于2015-11-17得票数 0
回答已采纳
1回答
jQuery accordion不会像预期的那样下降
jquery、html、css、accordion、collapse
我目前正在建设一个网站，其中包含一个手风琴菜单。
我的问题是，当我点击需要折叠的项目时，它确实会折叠，但在折叠后它会立即返回到未折叠状态。
$(document).ready(function(){
$(".set > a").on("click", function(){
if($(this).hasClass('active')){
$(this).removeClass("active");
$(this).siblings('.conte
浏览 4提问于2016-09-12得票数 1
回答已采纳
3回答
通过javascript / Light模式切换fas fa图标
html、jquery、css
不知道我在哪里出错，但图标没有改变。
$( ".inner-switch" ).on("click", function() {
if( $( "body" ).hasClass( "dark" )) {
$( "nav" ).removeClass( "dark-force" );
$( "body" ).removeClass( "dark" );
$(this).find("i").toggleClas
浏览 1提问于2020-08-29得票数 2
回答已采纳
1回答
关于手风琴问题的jQuery toggleClass
javascript、jquery、html、css
因此，有这个小HTML，JS和CSS的小手风琴im制作，使用字体-可怕的图标。
默认情况下，我们有第一个手风琴面板打开，并有图标“fa-减号”，而其他关闭与"fa-plus“，现在我添加的按钮改变了图标，您曾经点击，但当然需要重置默认，并改变他们正确的图标，因为你通过手风琴。有什么想法吗？
$(document).ready(function($) {
$('#accordion').find('.panel-heading').click(function() {
//Expand or collapse this panel
浏览 3提问于2015-11-30得票数 1
回答已采纳
6回答
如何使禁用状态的字体可怕的图标按钮？
html、css、bootstrap-4、font-awesome
我正在使用字体可怕的图标按钮，我需要有一个图标的禁用状态。我可以让它看起来像禁用按钮使用Bootstrap禁用类，但它是可点击的。有没有什么方法可以让你不能点击？
这是我的HTML代码：
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class='btn btn-primary disabled' disabled>
浏览 0提问于2019-01-14得票数 3
1回答
平顶悬停效果与手风琴本体同色标头
html、css、accordion、jquery-ui-accordion
我当时正在做一个可折叠手风琴，发现了两件我想要改变的东西。我在跟踪。我不能做其中的一些事情。就像悬停一样不一样，第二，打开后颜色是不同的。请看一看，并帮助我解决它的。
$(document).ready(function(){
$(".research-group-header").click(function(){
// self clicking close
if($(this).next(".research-group-body").hasClass("active")){
$
浏览 4提问于2021-05-01得票数 0
回答已采纳
1回答
单击按钮更改按钮文本和图标文件(字体很棒)
javascript、jquery
我试图更改一个按钮的文本，以及它的相关图标文件的点击，然后在单击再次反向。我已经有一半的路，能够切换图标的类和按钮的颜色，但是如果我试图改变文本或按钮的html，它删除图标引用。有没有更有效的方法来完成这一切？
html
<button type="button" class="btn btn-success btn-sm" id="newSale">
<i id="iconChange" class="fa fa-plus"></i> add new
</butt
浏览 0提问于2014-01-21得票数 1
回答已采纳
2回答
电源开关按钮/div
javascript、css
我试着做一个断电按钮(实际上它是一个div)，当我点击它时，它会改变它的外观。它看起来像一个中断器，所以我想改变页面的background-color，图标‘关闭’的颜色和按钮的border-style。
我从另一个站点获得了这个函数，它在添加一次CSS属性方面做得很好，但我希望它能够一直保持下去。
document.getElementById('io').addEventListener('click', function () {
if (this.classList.contains('poweroff')) {
// this
浏览 1提问于2017-11-11得票数 0
回答已采纳
3回答
在jquery添加/删除类之后返回正常状态
jquery、html、css
我有一个手风琴，有三个按钮，打开折叠内容。当我单击每个按钮时，它们都会正确打开，并且“加号”更改为removeClass()、addClass()中的“减号”。现在，我希望它们在再次单击并关闭内容时，使用“加号”返回到原来的状态。
我尝试了有条件的，如果其他，但似乎无法使它发挥作用。用那种方法把手风琴弄坏了。
HTML:
<div class="accordion--one">
<button class="btn accordion-btn" type="button" dat
浏览 1提问于2019-08-23得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
