在没有 JavaScript 的 CSS 中突出显示活动面板答案

【问题标题】：Highlighting active panel in CSS without JavaScript在没有 JavaScript 的 CSS 中突出显示活动面板
【发布时间】：2010-09-13 09:41:07
【问题描述】：

我想知道是否有人对如何在不使用 JavaScript（纯 CSS）的情况下在导航中显示当前面板有任何想法。

我相当确信这是不可能的，但我想我还是会问。

只是为了澄清......
您会注意到，当您单击此页面上的链接时 - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher-javascript.html您刚刚单击的链接突出显示，以告知用户他们正在查看哪个面板。这就是我想在 CSS 中做的事情。

【问题讨论】：

我认为没有 css 是不可能的。一种或另一种方式，你将不得不告诉一个 div 显示和另一个隐藏..
@Litso：如果您的意思是“没有 JavaScript”而不是“没有 css”，那么：不是这样！他链接到的第一件事就是管理它，我在答案中发布的链接中详细讨论了该技术。当我发现不用 JavaScript 也能做到这一点时，我真的很震惊。
我的意思是 javascript.. 我会检查一下 :)

【解决方案1】：

这是可能的，信不信由你，这真的很棘手。这应该可以帮助您入门：http://thinkvitamin.com/design/css/how-to-create-a-valid-non-javascript-lightbox/ 在此引用中捕获了关键位：

我相信你们都知道使用 ID 属性链接到同一页面上的元素及其工作原理。但是，您可能不知道链接到隐藏在页面之外的元素会导致该元素被“拉”到视图中，而不是窗口跳到该元素。

所以基本上，您会将所有幻灯片放在页面外，然后让编号的链接使用锚点将它们拉到视图中。您的用例应该比她的用例简单一些，因为您不必使页面的其余部分变暗。

【讨论】：

@Sam：您可以将导航部分作为被拉入视图的内容（因此第一个面板将包含带有蓝色第一个导航链接的导航；第二个面板将包含带有第二个导航链接蓝色；等）或定位导航链接，以便面板内的内容可以指向它们（而不是突出显示它们）。（抱歉，顺便说一句，我一开始并没有意识到你链接到的东西是 CSS-only。）
（上面的评论是对 Sam 的评论的回复，他现在已被删除并折叠到他的问题中。）
J：谢谢，面板将使用无限数量的实例动态创建，因此制作大量导航实例可能有点繁重。不过我会试一试的！
哇，这是一个很棒的解决方案。我什至还没有真正明白，但我会的。从来不知道这是可能的
@Litso：是的，这太不可思议了，不是吗？正如我所说，当您尝试转到隐藏在页面外的锚点时，这一切都取决于浏览器的行为。向那些想出这一点的人致以崇高的敬意......

【解决方案2】：

你需要做的是把你需要滑动的东西放在一个固定大小和“溢出”属性设置为隐藏的容器内。然后，在这个容器中，将“可滑动”内容放在锚元素列表中，“显示”设置为与容器相同的块和大小。如果从页面上的链接调用列表中的某个锚点，则具有相应锚点名称的元素将自动显示。就这么简单。

【讨论】：