需要使用 Javascript 或 jquery 更改单击时按钮的背景颜色？

发布于 2025-01-10 07:45:21 字数 920 浏览 0 评论 0原文

我有 2 个带有 df-button 和 df-web-design 类的按钮 - 我希望更改其中任何一个按钮的背景颜色，这意味着仅应更改单击的按钮本身的背景，然后当我们单击另一个按钮时，背景应返回默认值。我的选择是使用 Jquery - 就像点击时的活动选项卡项一样 -

<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".df-web-design").addClass("df-button-active");
    $(".df-button").removeClass("df-button-active");
  });
});
</script>

.df-button-active {
background-color: green;
color: white;
transition: all 0.5s ease;
}

<a class="df-button" href"#">All</a>
<a class="df-web-design" href"#">All</a>

由于这是 WordPress 中的页面构建器，所以我使用页面 css 或类似这样的代码片段 -

是否有什么东西我缺少，因为它不起作用？

我是 JS 的新手，所以请原谅我的不专业。非常感谢并提前致谢。

原文

I have 2 buttons with class df-button and df-web-design -
i wish to change one any of these buttons background color meaning the background should only be changed of the clicked button itself and then when we click on the other button the background should be return to default. My choice is to use Jquery - Something like an active tab item on click-

<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".df-web-design").addClass("df-button-active");
    $(".df-button").removeClass("df-button-active");
  });
});
</script>

.df-button-active {
background-color: green;
color: white;
transition: all 0.5s ease;
}

<a class="df-button" href"#">All</a>
<a class="df-web-design" href"#">All</a>

Since this is a page builder in wordpress so im using page css or a code snippet like this-

Is there something im missing as its not working?

Im kinda a new bie in JS so do pardon my inexpertise. Much appreciated and THanks in advance.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不羁少年 2025-01-17 07:45:21

只需使用这样的东西即可。在此处了解更多信息 https://api.jquery.com/click/。

  $(".df-button").click(function(){
    $(this).addClass("df-button-active");
  });
  $(".df-web-design").click(function(){
    $(".df-button").removeClass("df-button-active");
  });

https://jsfiddle.net/e95xrtjL/1/

Just use something like this. Lean more here https://api.jquery.com/click/.

  $(".df-button").click(function(){
    $(this).addClass("df-button-active");
  });
  $(".df-web-design").click(function(){
    $(".df-button").removeClass("df-button-active");
  });

https://jsfiddle.net/e95xrtjL/1/

回复收藏 0 原文

~没有更多了~