如何通过Bulma按钮控制指定contentswitch元素的is-hidden类切换？

你只需要在现有点击事件的基础上，添加两步操作：获取当前按钮对应的目标区块ID，再移除该区块的is-hidden类即可。

修改后的完整JavaScript代码如下：

$("a.button").on("click", function(){
  // 第一步：隐藏所有.contentswitch类的内容区块
  $("div.contentswitch").addClass("is-hidden");
  // 获取当前点击按钮对应的目标区块ID
  const targetSectionId = $(this).data("target");
  // 第二步：显示对应的目标区块
  $("#" + targetSectionId).removeClass("is-hidden");
});

代码说明 #

1. 点击任意按钮时，先统一给所有内容区块加上is-hidden类，确保所有区块都被隐藏。
2. 通过$(this).data("target")获取当前按钮的data-target属性值，这个值就是你要显示的区块的ID。
3. 利用ID选择器选中目标区块，移除is-hidden类，让它重新显示。

可选优化：设置初始显示状态 #

如果希望页面加载完成后默认显示某个区块（比如Section A），可以在页面初始化时添加以下代码：

$(document).ready(function(){
  // 默认隐藏除ID为A之外的所有内容区块
  $("div.contentswitch").not("#A").addClass("is-hidden");
});

内容的提问来源于stack exchange，提问作者thomashh