我想在我的项目中使用以下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();
});
});
：焦点状态
这个问题的原因是幻灯片放映依赖于CSS的:focus处理来记住状态。这是一个非常临时的处理程序，每当关注新元素时就会丢失。我为非交互式元素制作了更多的幻灯片，只是为了演示视觉作品——这在: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的幻灯片放映/旋转木马？