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

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

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

它不使用任何 JavaScript 或 jQuery。当我单击除“幻灯片 5”带我回到最初“幻灯片 5”而不是打开一个新选项卡。这是 CSS 代码，我不知道如何修复它。我可以使用额外的 jQuery 或 JavaScript 来解决这个问题。

我尝试使用以下 jQuery 来停止单击操作，但它不起作用

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

：焦点状态

造成此问题的原因是幻灯片依赖于:focus处理 CSS 来记住状态。这是一个非常临时的处理程序，每当新元素获得焦点时就会丢失。我更多地为非交互式元素构建了幻灯片，只是为了演示视觉工作 - 这可以很好地使用:focus

当没有一张幻灯片获得焦点时，幻灯片放映将恢复到幻灯片 5（或最后一张幻灯片）。这可以满足我的需求，但显然不适合您的用例。当你专注于自己的事情时就会发生这种情况<a href="" />元素。

CSS 的限制

不幸的是，（在当前的 CSS 中）没有办法将专注的孩子与父母相匹配——至少我不知道。这将解决纯 CSS 的问题。显然你可以向下匹配（即parent:focus .child），但这没有帮助。您可以雇用复选框/单选黑客我当时确实考虑过，或者你可以改用另一种“记住状态”的方式。

：目标状态

原始演示中的 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用于处理“子导航”链接：

实现带有下一个和上一个按钮的纯 CSS 幻灯片/轮播？