隐藏文本的CSS按钮操作

我想要构建一个网站，其左侧有4个按钮，它们更改网站主窗口中的文本（传统上它们会将用户转到另一个单独的页面）。隐藏文本的CSS按钮操作

当我点击按钮时，我不想转到另一个页面，而是隐藏主窗口中的文本，并将其更改为新页面的文本。

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

感谢您的任何帮助。

2011-06-23 The Woo

我不认为你可以没有javascript ....或iframes – Trey

这将需要JavaScript，框架或*可能*一些CSS3。无论如何，我敦促你仔细考虑这个页面的可访问性。如果你不小心，你可以很容易地结束，使盲人不可能使用你的网站。 –

这是可能的CSS 2和没有JavaScript。我做了一个例子，你在这里看到： http://jsfiddle.net/theguywholikeslinux/QQrFy/

我没有真正测试它的浏览器兼容性，但我相信它适用于大多数支持css 2和定位合理（包括IE的老版本）的浏览器。只要您不介意屏幕阅读器一次读完每一页，屏幕阅读器就无障碍化了。（尽管有些混淆可能是由链接引起的）。

基本上有4个div都有一个id集和一个特定的宽度，高度和位置（基本上它们都在彼此之上）。这些链接是href="#id#"，当你点击它们时，相关的div就会出现在堆栈的顶部，以便你可以看到它。）

唯一的缺点是它会引起奇怪的滚动问题（例如页面顶部的链接，要更改的内容一直在底部），并且您必须为所有元素使用相同的固定大小。因此，如果您希望这样的网页高于700px，那么只包含200px内容的网页仍会向下滚动另一个500px。

2011-06-24 09:01:39 theguywholikeslinux

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

更新：你可以用CSS 3，做请看例子：http://jsfiddle.net/RUDyw/

2011-06-23 23:13:57 user194076

不，你需要的JavaScript。 JQuery或类似的东西可以让它变得容易。

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

2011-06-23 23:20:08 vascop

仅为此使用jQuery是矫枉过正的。 – 2011-06-23 23:29:55

由于几乎每个人都已经从谷歌的CDN缓存jquery，并且因为它使它在一个短片段中工作，我其实很喜欢这个选项... – vascop

回答