锚标记单击在 CSS 滑块中不起作用

Question

我想在我的项目中使用以下 CSS 滑块

http://jsfiddle.net/63w9jnqq/1/

它不使用任何 JavaScript 或 jQuery。当我单击 'slide 5' 以外的任何幻灯片中的链接时，我会返回到第一个 'slide 5' 而不是打开新标签。这是 CSS 繁重的代码，我不知道如何修复它。我可以使用额外的 jQuery 或 JavaScript 来解决这个问题。

我尝试了以下 jQuery 来停止点击动作，它不起作用

$(document).ready(function(){
    $(".slide-gfx a").click(function(event){
        event.preventDefault();
    });
});

Answer 1

:焦点状态

此问题的原因在于幻灯片依赖于 CSS 的:focus 处理来记住状态。这是一个非常临时的处理程序，每当聚焦新元素时它就会丢失。我为非交互式元素制作了更多幻灯片，只是为了演示视觉作品——这适用于:focus

当所有幻灯片都没有聚焦时，幻灯片将恢复到幻灯片 5（或结束幻灯片）。这对我的需求很好，但显然不适合您的用例。当您专注于 <a href="" /> 元素时，就会发生这种情况。

css 的限制

不幸的是，没有办法（在当前的 CSS 中）将专注的孩子与父母相匹配——至少我不知道。这将解决纯 CSS 的问题。您显然可以向下匹配（即parent:focus .child），但这无济于事。你可以使用我当时考虑过的The checkbox/radio hack，或者你可以切换到使用不同的“记忆状态”方式。

:目标状态

原始演示中的 CSS 已经定制为还支持 :target 作为替代方案，因此您可以使用少量 JS 修补当前功能。但是，我不想在旧版浏览器中依赖此功能 - 但话说回来，旧版浏览器可能会发现无论如何都难以应付这个系统。

片段和小提琴

此补丁侦听:focus 事件，并将 URL 中的片段设置为与幻灯片的 id 匹配。这意味着 CSS 然后切换到侦听 :target 选择器，这应该保持选择右侧幻灯片。

http://jsfiddle.net/63w9jnqq/4/

$('.slide').on('focus',function(e){
  window.location.hash = $(this).attr('id');
});

推荐

展望未来，我建议也许看看实现 CSS 的最新方法。我确信有很多新的改进可以用来扩展系统——这是我最近没有时间做的。甚至可能会集成触摸式事件以使事情更自然地移动友好，尽管这可能只是一厢情愿的想法。

归根结底，尽管此解决方案中有很多 CSS，但最好尝试并理解您在项目中使用的代码的每一部分 - 因为这有助于调试您可能会遇到的情况中。这个问题在原帖中提到过，使用:target的解决方案是用来处理“sub nav”链接的：

Implement a CSS-only slideshow / carousel with next and previous buttons?