javascript - anchor 标记单击在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();
    });
});

最佳答案

：焦点状态

导致此问题的原因在于幻灯片放映依赖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?

关于javascript - anchor 标记单击在CSS滑块中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41518770/