我在背景图片上有一些超链接。 这些超链接正常工作,但在移动视图中,当我单击这些超链接时没有任何反应。 下面是超链接的代码。 您还可以参考网站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>

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

#1楼 票数:2 已采纳

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

  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")

  ask by Anurag translate from so

未解决问题?本站智能推荐:

1回复

响应式图像滑块不起作用

导航栏正在工作,但轮播无法正常工作。 以多种方式进行了尝试,但是图像滑块不可见。 Bootstrap也已链接。 阅读Bootstrap Carousel的文档,但没有帮助。 帮帮我。 我的HTML代码: 我的CSS代码: 输出屏幕。 您会看到任何地方都没有图像滑块
1回复

链接在 django 模板中的锚标记中不起作用

我有一个带有自定义用户模型的 django 项目。 当用户注册时,他还提供了他公司网站的网址。 我使用USER访问并在模板中显示它。 但是当我将它写在锚标记中时,它不会作为单独的链接打开,如下所示: 相反,它带我到这个链接
3回复

链接在 HTML 中不起作用。 我用过了 ” “ 标签

我的链接在 HTML 中不起作用,我不知道为什么。 <div class="banner-text"> <ul> <li><h3><a href="chawla.html">HOME</a>
1回复

引导程序 | 链接在带有 my-auto 类的 div 中不起作用

我有一个带有 3 列的轮播,其中 1 列用于上一个和下一个轮播控件。 这些使用 my-auto 类在列中垂直对齐。 但是,一旦我将该类添加到列中,链接就不再起作用。 我在列 div 上尝试了溢出:自动,但它没有帮助。 有什么建议吗? 我正在使用 Bootstrap 4.4。 这是我现在拥有的一个快
4回复

我的Bootstrap 4响应式列布局不起作用

因此,我使用Bootstrap 4创建了一个非常简单的响应式网站布局,因此根据代码,当它进入平板电脑模式时,列数应变为4,即,当视口为768px宽时,我的显示范围可以达到770px,显示4列, 769px,它将切换到智能手机模式,并采用整个宽度并彼此堆叠。 <div class
1回复

响应式设计结合 Bootstrap 和 Django 不起作用

我不知道我哪里出错了。 我的代码中有什么不正确的地方? 我有如下子页面的网站。 响应式设计不起作用。 它是否与 HTML/CSS 代码中的任何错误有关,或者我应该使用任何特定方式在引导程序中进行响应式设计而不是媒体查询? 通常,行和列存在问题 - 我无法响应地更改边距和字体大小。 会不会跟djang
1回复

为什么 CSS 样式表在移动设备上不起作用?

我是 webdev 的初学者。 我正在使用引导程序为按摩治疗师建立一个网站。 问题是我的 CSS 样式没有显示在移动设备上。 背景和引导导航栏消失。 我使用了一个 PNG 文件作为一个大徽标,也不会在移动设备上显示。 我尝试在移动设备上使用 chrome。 这是 HTML 页面: 这是 CSS
1回复

当我使其响应时,我的链接不起作用

这是 HTML 部分 这是 CSS 问题是链接正在工作到公寓选项。 我发现问题出在我正在使用的 bootstrap css 上。当我删除 bootstrap cdn 时它工作正常,但是当我把它放回去时它不起作用。我需要 Bootstrap 容器和行类,因为我已经根据那些 div