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

发布于 2024-09-19 02:41:22 字数 660 浏览 7 评论 0原文

我正在构建与此类似的东西 - 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

┈┾☆殇 2024-09-26 02:41:31

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

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.

我ぃ本無心為│何有愛 2024-09-26 02:41:29

不管你信不信,这是可能的,这真的很棘手。这应该可以帮助您开始: http:// /thinkvitamin.com/design/css/how-to-create-a-valid-non-javascript-lightbox/ 关键部分在此引用中捕获:

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

所以基本上,您可以将所有幻灯片放在页面之外,然后使用锚点将编号链接拉入视图。您的用例应该比她正在做的用例简单一点,因为您不必调暗页面的其余部分。

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:

I'm sure you are all aware of linking to an an element on the same page with the use of the ID attribute and how it works. However, you may not have known that linking to an element that is hidden off the page causes the element to be "pulled" into view as opposed to the window jumping down to that element.

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文