首页 > 编程语言> > javascript-锚标记单击在CSS滑块中不起作用

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

2019-10-12 07:36:32 作者：互联网

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

它不使用任何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选择器,这应保持选择正确的幻灯片.

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

建议

展望未来,我建议您也许应该看一下实现CSS的最新方法.我敢肯定,可以使用许多新的改进来扩展系统-我最近没有时间.甚至可能集成了触摸式事件,使事情更自然地移动友好,尽管这也许只是一厢情愿.

归根结底,即使此解决方案中有很多CSS,还是最好尝试并了解您在项目中使用的代码的每一部分-因为这有助于调试可能会遇到的情况.这里的原始帖子中提到了问题,使用使用：target的解决方案来处理“ sub nav”链接：

标签：javascript,jquery,css3,css-transitions
来源： https://codeday.me/bug/20191012/1898587.html