Question

我主要是入境营销人员，但我擅长HTML和CSS。我的知识并没有超越这两个。

我正在为我的公司建立一个主页。我陷入了困境。

我的主页有六个图标，代表不同的好处。

我想在下面放置一个单独的div，它会响应通过更改文字点击的图标。

网站这样做的最好例子是他们Homepage上的Kiss Metrics。

我不知道JS或jQuery，有什么办法可以用CSS来完成吗？

Answer 1

你可以用jQuery做到这一点：

$("#imgDiv1").click(function () {
  $("#textDiv2", "#textDiv3", "#textDiv4", "#textDiv5", "#textDiv6").hide();
  $("#textDiv1").show();
});

代码说明：为每个图片div指定一个点击功能，以隐藏所有其他textDiv并显示所需的div。

Answer 2

实际上这个 IS 只能使用CSS3，感谢:target - 您可以为目标元素应用不同的样式。

<强> Live jsFiddle demo

<强> HTML：

<div id="icons">
  <a href="#txt1">ICON1</a>
  <a href="#txt2">ICON2</a>
  <a href="#txt3">ICON3</a>
</div>
<div id="text">
  <span id="txt1">Benefit 1</span>
  <span id="txt2">Benefit 2</span>
  <span id="txt3">Benefit 3</span>
</div>

<强> CSS：

#text span {
  display:none;
}
#text span:target {
  display:block;
}

请注意：

单击#icons以外的元素后，文本将立即消失。
我们真的建议使用jQuery来完成这类任务。这真的很容易，试试吧。

Answer 3

虽然我还没有丰富的javascript经验，但我必须说这只是通过使用javascript完成的。我是一名网络开发人员，讲的是经验，HTML＆amp; CSS真的只关注结构/样式。

Answer 4

没有JavaScript - 没有。

使用JavaScript，您可以使用

document.getElementById('elementId').style.display='none'

使元素消失，

document.getElementById('elementId').style.display='block'

让它出现。

无论如何，jQuery将是一个更好的解决方案。

如何通过单击不同的图标来更改另一个div中的文本

4 个答案: