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

2019-10-12 07:36:32 阅读：233 来源： 互联网

标签：javascript jquery css3 css-transitions

我想在我的项目中使用以下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选择器,这应保持选择正确的幻灯片.

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,jquery,css3,css-transitions
来源： https://codeday.me/bug/20191012/1898587.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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