Question

在我的网站上，用户可以收藏图像（用户将鼠标悬停在图像上，选择喜欢的图像显示）。我当前的代码（在foreach循环中）：

    <a class="fancybox" title="Titel {{ $afbeelding }}" rel="group" href="{{asset('assets/images/badkamer/full').'/'.$afbeelding->url}}" >
        <div class="favorieten-hover-box">
            <img src="{{asset('assets/images/badkamer/thumb').'/'.$afbeelding->url}}">  
            <div>
                <span>                               
                    <a rel="group" href="<?php if (!Auth::check()){echo URL::to('login');} else{ echo "javascript:void(0);";}?>"><i class="fa fa-lg fa-heart-o favoriet-knop" title="Toevoegen aan favorieten" id="{{$afbeelding->id}}"></i></a>
                    <a rel="group" href="{{URL::to('badkamer/'.$afbeelding->kamer->id.'/'.str_replace(' ','-',$afbeelding->kamer->naam))}}"><i class="fa fa-caret-square-o-right  fa-lg" title="Badkamer bekijken"></i></a> 
                </span>
            </div>
        </div>
    </a>

如您所见，<a>标记中有<a>标记，fancybox会将所有内部<a>标记作为图像添加到fancybox的图库中。因此，如果我点击图片，其中有3个在图库中。我可以做些什么来保持这样的标签，但避免在一个图库中使用相同的图像3次。

编辑：a标签完美无缺地链接到正确的操作，唯一的问题是所有图片在fancybox图库中出现3次。

Answer 1

由于在另一个<a>标记内嵌套<a>标记会导致几乎不可能的解决方案，因此您可以使用另一个元素（如MauricioCarnieletto所示）来包装嵌套的{JSFIDDLE。 1}}标签。

然后使用特殊的fancybox的<a>属性将该包装器（class="fancybox"）元素绑定到fancybox但是：

data
data-fancybox-href
data-fancybox-title

喜欢：

data-fancybox-group

然后你的脚本可以简单：

<div class="fancybox" data-fancybox-title="Titel {{ $afbeelding }}" data-fancybox-group="group" data-fancybox-href="{{asset('assets/images/badkamer/full').'/'.$afbeelding->url}}" >
    <div class="favorieten-hover-box">
        <img src="{{asset('assets/images/badkamer/thumb').'/'.$afbeelding->url}}" alt="" />  
        <div>
            <span>                               
                <a href="<?php if (!Auth::check()){echo URL::to('login');} else{ echo "javascript:void(0);";}?>"><i class="fa fa-lg fa-heart-o favoriet-knop" title="Toevoegen aan favorieten" id="{{$afbeelding->id}}"></i></a>
                <a href="{{URL::to('badkamer/'.$afbeelding->kamer->id.'/'.str_replace(' ','-',$afbeelding->kamer->naam))}}"><i class="fa fa-caret-square-o-right  fa-lg" title="Badkamer bekijken"></i></a> 
            </span>
        </div>
    </div>
</div>

参见 JSFIDDLE

注意我从嵌套链接中删除了$(".fancybox").fancybox();属性，因为您不需要它们，除非您将它们用于fancybox之外的其他目的。

编辑：由于您在包装器中有嵌套链接，因此您可能希望它们在不触发fancybox的情况下执行单独的操作，并在rel="group"上显示它们，如前所述你的评论如此

首先你可能需要调整你的css，如

hover

通知我定位的是.fancybox:hover .fa { display: block; /* other css properties */ }类，这对于两个嵌套链接都是通用的。

然后调整你的fancybox初始化代码，如

.fa

通知我们使用$(".fancybox").on("click", ".fa", function (e) { e.stopPropagation(); // don't fire fancybox }).fancybox();来阻止选择器.stopPropagation()触发fancybox但仍然执行默认操作。

查看更新的 {{3}}

Answer 2

根据W3C规范：Nested Links are Illegal。

A元素定义的链接和锚点不能嵌套;一个A.   element不得包含任何其他A元素。

由于DTD将LINK元素定义为空，因此LINK元素可以   也不要嵌套。

因此，没有正确的方法来修复＆＃34;你的问题不符合标准，也没有把锚标签放在其他锚标签中 - 这没有任何意义，也不会像你发现的那样发挥得很好。您需要弄清楚如何以不同的方式构建HTML以符合您正在使用的元素的标准。

Answer 3

像sphanley所说，你不能嵌套两个链接，但是，你可以用js解决这个问题，并改变元素。

将您的HTML更改为此冷杉：

<span class="callthisanewclass" title="Titel {{ $afbeelding }}" rel="group" data-href="{{asset('assets/images/badkamer/full').'/'.$afbeelding->url}}" >
        <div class="favorieten-hover-box">
            <img src="{{asset('assets/images/badkamer/thumb').'/'.$afbeelding->url}}">  
            <div>
                <span>                               
                    <a rel="group" href="<?php if (!Auth::check()){echo URL::to('login');} else{ echo "javascript:void(0);";}?>"><i class="fa fa-lg fa-heart-o favoriet-knop" title="Toevoegen aan favorieten" id="{{$afbeelding->id}}"></i></a>
                    <a rel="group" href="{{URL::to('badkamer/'.$afbeelding->kamer->id.'/'.str_replace(' ','-',$afbeelding->kamer->naam))}}"><i class="fa fa-caret-square-o-right  fa-lg" title="Badkamer bekijken"></i></a> 
                </span>
            </div>
        </div>
    </span>

然后，将此添加到您的JS（在本例中为Jquery）

$('.callthisanewclass').on('click', function () {

    var ths = $(this),
        href = ths.data('href');

    ths.fancybox({

       href: href

    });

}

链接标记中的Fancybox链接

3 个答案: