为什么我的 html 链接在“猫头鹰轮播”中不起作用答案

【问题标题】：Why aren't my html links working in 'Owl Carousel'为什么我的 html 链接在“猫头鹰轮播”中不起作用
【发布时间】：2014-04-22 19:19:49
【问题描述】：

我已经开发了这个网站http://aevoe.com.au

我已经使用猫头鹰轮播作为主页上的滑动轮播。

但是，我在其中包含幻灯片的链接不起作用，甚至无法点击。

这是轮播的标记：

<div class="fourteen columns offset-by-one">
    <div class="row" id="slide-margin">
        <div id="owl-demo" class="owl-carousel">
            <div><a href="works/summer-selections"><img src="images/dissolve-now.jpg" /></a></div>
            <div><a href="works/summer-selections"><img src="images/need-you-now.jpg" /></a></div>
            <div><a href="works/arcade-fire"><img src="images/the-suburbs.jpg" /></a></div>
        </div>  
    </div>
</div>

不知道是什么问题。。

【问题讨论】：

我看到你解决了你的链接问题。我对第 2 版也有同样的情况。你碰巧做了什么来解决这个问题？

标签： jquery html hyperlink

【解决方案1】：

http://aevoe.com.au/assets/libs/aevoe.js

删除点击事件上的 preventDefault() 方法！

 $(".a").click(function(b){b.preventDefault();newLocation=this.href;$("body").fadeOut(1000,a)});

否则，请正确处理 href。

例子：

 $(".a").click(function(b){newLocation=this.href;$("body").fadeOut(1000,a)});

或

 $(".a").click(function(b){b.preventDefault();newLocation=this.href;$("body").fadeOut(1000,a); window.location.href=newLocation;});

【讨论】：

我没有看到 a 类应用于链接。你能指出这发生在代码中的什么地方吗？
嘿，当然 - 抱歉，请看。我检查过猫头鹰旋转木马。不会压制任何事件。您只能尝试将 .a 类添加到链接中。请尝试一下
.a 类不适用于轮播，它用于主导航链接的页面淡出。
比写一个特殊的方法（没有fadeOut），有什么问题？
我已经尝试了您推荐的所有方法，但幻灯片上的链接仍然无效

【解决方案2】：

如果有人遇到此问题，请检查轮播中元素的 z-index，将其设置为较高的值，例如 1000 并进行测试。为我解决了这个问题。另外，我必须添加这些：

z-index: 1000;
display: block;
width: 100%;
height: 100%;
position: relative;

【讨论】：

【解决方案3】：

我遇到了同样的问题，检查代码，在我的情况下，'.owl-nav' 按钮是否位于链接上方的 z-index 中，所以我的解决方案是操纵 DOM 以添加按钮没有父母。

干杯

【讨论】：

这也是我的问题。我将导航按钮直接放在旋转木马上方，并尝试使用 flex 将它们居中，从而让它们覆盖项目。

【解决方案4】：

这是我对相同问题的解决方案：

HTML：

        <div id="your_selector">
            <div class="item">
                <a href="https://examble.com" target="_blank" class="item-link">
                    <img src="https://examble.com/file_name.png" />
                </a>
            </div>
            <div class="item">
                <a href="https://examble.com" target="_blank" class="item-link">
                    <img src="https://examble.com/file_name.png" />
                </a>
            </div>
            <div class="item">
                    <img src="https://examble.com/file_name.png" />
            </div>
            ....
        </div>

CSS：

.has-href{
    cursor: pointer;
}

JQuery (JavaScript)：

    const slider= $('#your_selector');

    slider.owlCarousel({
       
       ........... (your options here) .......

    });
    slider.find(".item-link").each(function (index, currentElement) {
        $(currentElement).closest(".item").addClass('has-href'); // add class `has-href` ro change mouse cursor on hover
        $(currentElement).closest(".item").click(function(e) {
            e.preventDefault();
            window.open(
                $(currentElement).attr('href'),
                $(currentElement).attr('target')
            );
            return false;
        });
    });

【讨论】：

【解决方案5】：

我终于明白了！

我有一个顶部的 div 并屏蔽了链接..

我刚刚更改了该 div 上的 z-index，链接现在可以正常工作。

【讨论】：

谢谢，但是为了更好地理解这个类是 product-thumb

【解决方案6】：

只需删除此行： "e.preventDefault();"

$('#carousel-cartoes li a').on('click', function(e){                                
            e.preventDefault();
            var .....

【讨论】：

你能解释一下为什么吗？

【解决方案7】：

问题可能是由样式pointer-events: none; 添加到.owl-item 的子元素引起的。

解决方案：

.owl-item > div {
    pointer-events: auto !important;
}

【讨论】：

【解决方案8】：

如果有人仍在尝试寻找方便的解决方案，在试验时我发现将整个轮播和父母放在一个标签中，以某种方式使它们可以访问。

标签嵌套得很深，但仍然完全可以点击！

这是我的示例代码：

<section class="hero-slider-area">
  <div class="container-fluid px-0 overflow-hidden">
    <span> <!--MAGIC-->
      <div class="row">
        <div class="col-12">
          <div class="hero-slider owl-carousel">
            <div class="slider-item">
              <div class="row p-5 justify-content-end">
                <div class="col-6 text-end p-5">
                  <div class="px-5">
                    <a
                      href="#"
                      class="text-white py-3 px-3"
                      style="
                        border: 3px solid #692184 !important;
                        color: #692184 !important;
                        font-weight: 800 !important;
                        z-index: 1001 !important;
                      "
                    >
                      MÁS INFORMACIÓN >
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </span>
  </div>
</section>

【讨论】：

【解决方案9】：

将<a> 或锚标记设为display: block;

【讨论】：