超链接在移动响应式 css 中不起作用

Question

我在背景图片上有一些超链接。 这些超链接正常工作，但在移动视图中，当我单击这些超链接时没有任何反应。 下面是超链接的代码。 您还可以参考网站http://coachx.in并查看“发布项目”链接在移动设备中不起作用。

 <section id="home" class="offset"> <div class="fullwidthbanner-container revolution"> <div class="fullwidthbanner"> <ul> <li data-transition="fade"> <img src="Images/Land.jpg" class="defaultimg" alt="" /> <div class="caption sfl bold bg text-center" data-x="center" data-y="180" data-speed="500" data-start="500" data-easing="easeOutExpo" style="margin-top: 0px; background-color: transparent; white-space: pre !important; text-transform: none !important; overflow-wrap: break-word !important;">Get any IT & BPO Project delivered by Trusted Firms</div> <div class="caption sfb icon bg" data-x="280" data-y="260" data-speed="500" data-start="800" data-easing="easeOutExpo"><span>#Free-Consultations</span></div> <div class="caption sfb icon bg" data-x="490" data-y="260" data-speed="500" data-start="1000" data-easing="easeOutExpo"><span>#Cost-Savings</span></div> <div class="caption sfb icon bg" data-x="650" data-y="260" data-speed="500" data-start="1200" data-easing="easeOutExpo"><span>#Payment-Security</span></div> <div class="caption sfb icon" data-x="340" data-y="360" data-speed="500" data-start="1600" data-easing="easeOutExpo"> <a href="Customer/Post_Project.aspx" class="btn3" style="border-radius: 5px; z-index: 1000001 !important; position: relative;">Post a Project</a> </div> <div class="caption sfb icon" data-x="640" data-y="360" data-speed="500" data-start="1800" data-easing="easeOutExpo"><a href="Customer/Post_Talent.aspx" class="btn3" style="border-radius: 5px; z-index: 1000001 !important; position: relative;">Hire a Developer</a></div> <%--<div style="width: 50%; float: right; margin-top: 150px; text-align: center;"> </div>--%> </li> </ul> <div class="tp-bannertimer tp-bottom"></div> </div> <!-- /.fullscreen-banner --> </div> <!-- /.fullscreen-container --> </section>

有人可以请指导。 如何使这些超链接可点击。

Answer 1

不确定实际的错误是什么，但从这些因素来看：

1. 我在 Chrome 中尝试了设备模式并且它有效，但它不适用于我的实际 iPhone 6 Plus。
2. 似乎没有与此问题相关的 JavaScript 警告。
3. 链接的标记就在那里（如果在 iPhone 上打开滑块时按住按钮，它会在底部显示 iOS 菜单，显示 URL，询问您是否要在新选项卡中打开它）。

似乎有东西阻止了触摸事件。 这是一种非常麻烦的修复方法，但它应该可以解决问题：

<script type="text/javascript">

jQuery(document).ready(function($) {
  $("#buynwa").on("touchstart", function(event) {
      window.location.href = $(event.target).attr('href');
    });
 });

</script>

尝试将其粘贴在您的 footer.php 文件中的</body>标记之前，在任何其他脚本下。 它将做的是在第一张幻灯片的第一个锚标记上查找touchstart事件，获取href属性，然后路由到该页面。 如果它有效，代码的$("#buynwa")部分将需要与其他锚标记的其他id进行调整，因为它们之间似乎没有任何公共类共享。 您将检查元素，并将 jQuery 选择器更改为$("#buynwa, #id2, #id3") 。