在没有 JavaScript 的 CSS 中突出显示活动面板
我正在构建与此类似的东西 - http://www .impressivewebs.com/demo-files/content-switcher/content-switcher.html
我想知道是否有人对如何在导航中显示当前面板而不使用 JavaScript - 纯 CSS 有任何想法。
我相当确信这是不可能的,但我想我还是会问。
只是为了澄清...
您会注意到,当您单击此页面上的链接时 - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher-javascript.html 您刚刚单击的链接会突出显示,以告知用户他们正在查看的面板。这就是我想在 CSS 中做的事情。
I'm building something similar to this - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher.html
I wondered if anyone had any ideas as to how I can show the current panel in the navigation WITHOUT using JavaScript - pure CSS.
I'm fairly confidant it's not possible but I thought I'd ask anyway.
Just to clarify...
You'll notice that when you click a link on this page - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher-javascript.html the link you just clicked on highlights to inform the user which panel they're looking at. That's what I want to do in CSS.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您需要做的是将需要滑动的内容放入固定大小且“溢出”属性设置为隐藏的容器内。
然后,在这个容器内,将“可滑动”内容放入锚元素列表中,并将“显示”设置为与容器相同的块和大小。
如果从页面上的链接调用列表中的锚点之一,则具有相应锚点名称的元素将自动显示。
就这么简单。
What you need to do is to put what you need to slide inside a container with fixed size and "overflow" property set to hidden.
Then, inside this container, you put your "slidable" contents inside a list of anchor elements with "display" set to block and size the same of the container.
If, from a link on the page, you call one of the anchors in the list, the element with the correspondent anchor name will automgically show up..
simple as that.
不管你信不信,这是可能的,这真的很棘手。这应该可以帮助您开始: http:// /thinkvitamin.com/design/css/how-to-create-a-valid-non-javascript-lightbox/ 关键部分在此引用中捕获:
所以基本上,您可以将所有幻灯片放在页面之外,然后使用锚点将编号链接拉入视图。您的用例应该比她正在做的用例简单一点,因为您不必调暗页面的其余部分。
It's possible, believe it or not, it's just really tricky. This should get you started: http://thinkvitamin.com/design/css/how-to-create-a-valid-non-javascript-lightbox/ The key bit is captured in this quote:
So basically, you'd put all of your slides off-page and then have the numbered links use anchors to pull those into view. Your use case should be a bit simpler than the one she's doing, since you don't have to dim out the rest of the page.