Question

例如，我想要左侧的一列按钮：

Option 1

Option 2

Option 3

Option 4

以及右侧的一列段落：

OPTION 1 TEXT PARAGRAPH

OPTION 2 TEXT PARAGRAPH

OPTION 3 PHOTO LIBRARY

OPTION 4 REGISTRATION FORM

当用户单击Option 1时，除了将Option 1 TEXT PARAGRAPH的CSS样式从display: none;更改为display: block;并进行更改外，我什么都不做Options 2-4到display: none;的样式。

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

我对HTML和CSS相当熟悉，但是之前从未遇到过此功能的需求。

不幸的是，我是JavaScript的新手，如果可以使用CSS处理，我不希望将其用于此。所以我的问题是吗？

顺便说一句，在这里创建一个新帐户询问之前，我已经搜索了很多答案，也许我只是想不出该如何措辞，但是如果答案在其他地方，请原谅我。

Answer 1

这是您使用JavaScript进行操作的方法。您可以在按钮中添加点击事件，并在段落中使用ID。然后使用javascript设置html css属性显示。我不认为您只能使用CSS来做到这一点。

添加了示例的小提琴链接

http://jsfiddle.net/cu2xaz86/12/

让我们说以下是您的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>

然后javascript函数可以像下面这样，在该函数中，首先不显示所有元素，然后为要显示的元素设置显示块。

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";
}

Answer 2

您可以使用标签和隐藏的收音机来实现。

columnHolder {
  display:flex;
}
rightColumnItem {
  display:none;	
}
[linkedTo="option1"] {
  background:green;
}
[linkedTo="option2"] {
  background:gold;
}
[linkedTo="option3"] {
  background:tan;
}
[linkedTo="option4"] {
  background:gray;
}
input[type=radio] {
  display:none;	
}
#option1:checked ~ columnHolder rightColumn [linkedTo="option1"] {
  display:block;
}
#option2:checked ~ columnHolder rightColumn [linkedTo="option2"] {
  display:block;
}
#option3:checked ~ columnHolder rightColumn [linkedTo="option3"] {
  display:block;
}
#option4:checked ~ columnHolder rightColumn [linkedTo="option4"] {
  display:block;
}

<input type="radio" name="radioSelector" id="option1" checked>
<input type="radio" name="radioSelector" id="option2">
<input type="radio" name="radioSelector" id="option3">
<input type="radio" name="radioSelector" id="option4">
<columnHolder>
  <leftColumn>
    <label for="option1"><div>Option 1</div><label>
    <label for="option2"><div>Option 2</div><label>
    <label for="option3"><div>Option 3</div><label>
    <label for="option4"><div>Option 4</div><label>
  </leftColumn>
  <rightColumn>
    <rightColumnItem linkedTo="option1">OPTION 1 TEXT PARAGRAPH</rightColumnItem>
	<rightColumnItem linkedTo="option2">OPTION 2 TEXT PARAGRAPH</rightColumnItem>
	<rightColumnItem linkedTo="option3">OPTION 3 PHOTO LIBRARY</rightColumnItem>
   <rightColumnItem linkedTo="option4">OPTION 4 REGISTRATION FORM</rightColumnItem>
  </rightColumn>
</columnHolder>

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

2 个答案: