Question

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

它不使用任何JavaScript或jQuery。当我点击'幻灯片5'以外的任何幻灯片中的链接会将我带回第一个'幻灯片5'而不是打开新标签页。这是CSS重型代码，我不知道如何解决它。我没有问题使用额外的jQuery或JavaScript来解决这个问题。

我尝试了以下jQuery来停止点击操作，它无法正常工作

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

Answer 1

：焦点状态

这个问题的原因在于幻灯片依赖于:focus处理CSS来记住状态。这是一个非常临时的处理程序，只要新的元素被聚焦就会丢失。我为非交互式元素构建了更多幻灯片，只是为了演示可视化工作 - 这与: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的解决方案用于处理“子导航”链接：

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

锚标签单击不在CSS滑块中工作

1 个答案:

：焦点状态

css的限制

：目标状态

片段和小提琴

建议