简体   繁体   English

jQuery- 循环按钮在单击时添加活动类

[英]jQuery- Loop through buttons add active class on click

在此处输入图片说明 Good day!再会! I'm new with jQuery.我是 jQuery 新手。 Please how do I loop through buttons to bring out only its contents when I click on it, and change the active class on them each time I click.请问我如何循环按钮以在我单击时仅显示其内容,并在每次单击时更改它们上的活动类。

I repeated the code below for two more buttons:我为另外两个按钮重复了下面的代码:

$("#member-company-btn").on("click", () => {
    $("#member-company-content").show("slow");
    $("#group-company-content").hide("slow");
    $("#abuja-sub-company-content").hide("slow");
    $("#lagos-sub-company-content").hide("slow");
})
$("#group-company-btn").on("click", () => {
    $("#member-company-content").hide("slow");
    $("#group-company-content").show("slow");
    $("#abuja-sub-company-content").hide("slow");
    $("#lagos-sub-company-content").hide("slow");
})

This to add active class to only the clicked button didn't work.这仅将活动类添加到单击的按钮不起作用。

$("#subsidiary-btns .subsidiary-btn").on("click", () => {
    $("button.subsidiary-btn").removeClass("subsidiary-btn-active");
    $(this).addClass("subsidiary-btn-active");
})

Thank you谢谢

Today I decided to stay on this till it works, instead of styling differently.今天我决定坚持下去,直到它起作用为止,而不是设计不同的样式。 And Persistence paid off.坚持得到了回报。 Inspired to make some changes to the code.受到启发,对代码进行了一些更改。 Below are the images showing a possible solution.下面是显示可能的解决方案的图像。

html代码

css代码

javascript代码

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM