CSS按钮操作隐藏文本

Question

我想建立一个左侧有4个按钮的网站，它改变了网站主窗口中的文本（传统上他们会将用户带到另一个单独的页面）。

我希望它能够在单击按钮时不必转到另一个页面，而是隐藏主窗口中的文本，并将其更改为该新页面的文本。

有没有办法隐藏文字，并使用CSS显示不同的文字？

感谢您的帮助。

Answer 1

可以使用CSS 2而不是javascript。我为你做了一个例子： http://jsfiddle.net/theguywholikeslinux/QQrFy/

我实际上没有测试它的浏览器兼容性，但我相信它适用于大多数支持css 2和定位相当好的浏览器（包括旧版本的IE）。只要您不介意屏幕阅读器一次一页地阅读每个页面，可访问性就会非常好。 （虽然链接可能引起一些混淆）。

基本上有4个div都具有id设置和特定的宽度，高度和位置（基本上它们都在彼此的顶部）。链接为href="#id#"，当您单击它们时，相关的div将出现在堆栈的顶部，以便您可以看到它。）

唯一的缺点是它可能导致奇怪的滚动问题（例如页面顶部的链接，内部一直在底部改变），并且您必须为所有元素具有相同的固定大小。因此，如果您希望这样的页面高度超过700px，那么仅包含200px内容的页面仍将向下滚动另外500px。

Answer 2

你不能在css2中这样做！你需要一个javascript

更新： 您可以使用css 3来完成。请参阅示例：http://jsfiddle.net/RUDyw/

在此处找到：http://dev.opera.com/articles/view/css3-show-and-hide/

Answer 3

不，你需要javascript。 JQuery或类似的东西会让它变得简单。

$('#button1').click(function() {
  $('#mainwindowtext').text("new text");
});