-1

我主要是入站营销人员，但我擅长 HTML 和 CSS。我的知识不超过这两个。

我目前正在为我的企业建立一个主页。我被困在这一点上。

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

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

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

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

4

4 回答 4

1

你可以用 jQuery 做到这一点：

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

代码说明：为每个图像 div 分配一个单击功能以隐藏所有其他 textDivs 并显示所需的 div。

于 2013-02-16T21:42:54.303 回答
1

实际上，这仅使用CSS3 是可能的，这要归功于:target- 您可以在点击时为目标元素应用不同的样式。

现场 jsFiddle 演示

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

请注意：

  1. #icons单击外部元素后，文本将立即消失。

  2. 真的推荐使用 jQuery 来完成这类任务。真的很简单，试试吧。

于 2013-02-16T21:56:22.123 回答
0

虽然我还没有丰富的 javascript 经验，但我必须说，这将完全通过使用 javascript 来完成。我是一名 Web 开发学生，谈到经验，HTML 和 CSS 真的只是更专注于结构/样式。

于 2013-02-16T21:42:42.650 回答
0

没有 JavaScript - 没有。

使用 JavaScript，您可以使用

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

使元素消失，并且

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

让它出现。

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

于 2013-02-16T21:44:34.540 回答