在没有JavaScript的CSS中突出显示主动面板

Question

我正在构建与此类似的东西 - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher.html

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

我很确信，这是不可能的，但我以为我还是要问。

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

Answer 1

不管您相信，这真的很棘手。这应该让您入门： http://thinkvitamin.com/design/css/how-to-to-create-a-valid-non-javascript-lightbox/ 在此报价中捕获了关键位：

我敢肯定，您都知道使用ID属性及其工作方式链接到同一页面上的元素。但是，您可能尚不知道链接到隐藏在页面上的元素会导致元素被“拉动”到视图中，而不是跳到该元素的窗口。

因此，基本上，您将所有幻灯片放在外页上，然后使用编号的链接使用锚将其吸引到视图中。您的用例应该比她所做的使用情况要简单一些，因为您不必将其余部分调整。

Answer 2

您需要做的是将其滑入具有固定尺寸和“溢出”属性的容器中所需的内容。然后，在此容器中，您将“可滑动”内容放入带有“显示”设置为块的锚元素列表中，并大小与容器相同。如果从页面上的链接中调用列表中的锚点之一，则具有通讯锚名的元素将自动显示。