使用CSS和HTML，是否可以让用户'；单击某个按钮是否可以更改其他元素的样式？

例如，我希望左侧有一列按钮：

Option 1

Option 2

Option 3

Option 4

右侧有一列段落：

OPTION 1 TEXT PARAGRAPH

OPTION 2 TEXT PARAGRAPH

OPTION 3 PHOTO LIBRARY

OPTION 4 REGISTRATION FORM

当用户单击

选项1

时，我希望它除了从

显示：无调整
选项1文本段落的CSS样式之外，什么都不做至<代码>显示：块
，并将
选项2-4的样式更改为
显示：无

这样，一次只能看到一个类别

我非常熟悉HTML和CSS，但以前没有遇到过对这个函数的需求

不幸的是，我对JavaScript是全新的，如果可以处理CSS的话，我不想使用它。所以我的问题是，是吗

顺便说一句，在创建一个新帐户之前，我已经搜索了很多答案，也许我不知道如何表达这个问题，但是如果答案存在于其他地方，请原谅。
下面是使用javascript的方法。您可以在按钮中添加click事件，并在段落中使用id。然后使用javascript设置html css属性显示。我不认为你可以只用css来做这件事

添加了示例的fiddle链接


让我们说下面是你的html。可能不是你想要的。。但这是一个例子

<button onclick="javascript:op('s1')">
  Option 1
</button>
<button onclick="javascript:op('s2')">
Option 2
</button>
<button onclick="javascript:op('s3')">
Option 3
</button>
<button onclick="javascript:op('s1')">
Option 4
</button>

<span id="s1" style="display: none;">
OPTION 1 TEXT PARAGRAPH
</span>
<span id="s2" style="display: none;">
OPTION 2 TEXT PARAGRAPH
</span>
<span id="s3" style="display: none;">
OPTION 3 PHOTO LIBRARY
</span>
<span id="s4" style="display: none;">
OPTION 4 REGISTRATION FORM
</span>

您可以使用标签和隐藏的收音机来执行此操作


列保持器{
显示器：flex；
}
右栏项目{
显示：无；
}
[linkedTo=“option1”]{
背景：绿色；
}
[linkedTo=“option2”]{
背景：金；
}
[linkedTo=“option3”]{
背景：谭；
}
[linkedTo=“option4”]{
背景：灰色；
}
输入[类型=收音机]{
显示：无；
}
#选项1：选中~columnHolder rightColumn[linkedTo=“option1”]{
显示：块；
}
#选项2：选中~columnHolder rightColumn[linkedTo=“option2”]{
显示：块；
}
#选项3：选中~columnHolder rightColumn[linkedTo=“option3”]{
显示：块；
}
#选项4：选中~columnHolder rightColumn[linkedTo=“option4”]{
显示：块；
}

选择1
选择2
选择3
选择4
备选案文1案文段落
备选案文2案文段落
选项3照片库
选择4登记表
简单的一点是，您可以尝试我们的帮助。这不是编码服务。“所以我的问题是，是吗？”。是的。但实际上这不是你的问题。你似乎要求有人为你写代码，这不是本网站的目的。这是非常有用的。我只是好奇你能否解释一下JS代码的第五部分是如何工作的（v）；部分是做什么的）？干杯，伙计。v部分只是javascript函数中的参数。我建议你在线做一个javascript教程，这会有所帮助。您可以看到在按钮点击时有一个函数调用op（'s1'）。在运行时，在这种情况下，v将有s1。。因此，第一段将是可见的。这感觉像巫术。我不明白我在看什么，但它是有效的。回答得很好，谢谢。我会研究这一点，并在我弄明白后尽快实施！其实很简单。“标签”标签用于“远程单击”收音机盒（带有id标签）。然后，css同级选择器根据“选中”显示。但无论如何，请选择此作为正确答案。
function op1(v) {
    var x = document.getElementById("s1");
  x.style.display = "none";

  x = document.getElementById("s2");
  x.style.display = "none";

  x = document.getElementById("s3");
  x.style.display = "none";

  x = document.getElementById("s4");
  x.style.display = "none";

  x = document.getElementById(v);
  x.style.display = "block";
}