我的锚标签不起作用。

弗罗伊

问题是正如标题中所述,单击用锚标签包裹的图像不起作用。

这是网格列表项的示例:

<li class="grid-list-item">
            <h3 class="grid-trail-name">Marshall Canyon</h3><span class="grid-loc">Mt Baldy, California</span>
            <div class="grid-overlay">
                <span class="grid-close">close</span>
                <div class="grid-trail">
                    <div class="open">
                        <div class="info-flex info">
                            <div class="info-sum info-flex-child">
                                <h3 class="info-sum-header">Marshall Canyon...</h3>
                                <p class="info-sum-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque imperdiet massa sed augue posuere aliquet. Sed ac eros convallis, porttitor tellus in, blandit lacus. Suspendisse mollis quis turpis ac tempor. Pellentesque imperdiet massa sed augue posuere aliquet. Sed ac eros convallis, porttitor tellus in, blandit lacus. Suspendisse mollis quis turpis ac tempor. </p>
                            </div>
                            <div class="info-map info-flex-child">
                                <a href="http://www.ramblr.com/web/mymap/trip/81548/154499" target="_blank" ><img src="http://www.ramblr.com/media/photo/map/20150714/0000154499_big_english.jpg?q=1461036407851" data-item="map_img" data-src="http://www.ramblr.com/media/photo/map/20150720/0000158962_big_english.jpg"  class="map"> </a>
                            </div>
                            <div class="info-graph info-flex-child">
                                <a href="http://www.ramblr.com/web/mymap/trip/81548/154499" target="_blank" ><img src="http://www.ramblr.com/media/photo/chart/20150714/0000154499_1_english.jpg?q=1461036467654" data-item="chart_img" data-src="http://www.ramblr.com/media/photo/chart/20150720/0000158962_1_english.jpg" class="graph"></a>
                            </div>
                            <div class="info-pic-section info-flex-child">
                                <img src="images/marshall.jpg" alt="" class="info-pic">
                            </div>
                        </div><!-- GRID INFO -->
                    </div><!-- OPEN -->
                </div><!-- GRID TRAIL -->
            </div><!-- GRID OVERLAY -->
        </li><!-- GRID ITEM -->

在用户单击网格项目之前,网格覆盖将保持隐藏状态。单击后,将显示信息部分。在信息部分中,有一个地图和图形,一旦单击它们,应打开一个新的锚标记。

我的猜测是,我用来实现这种效果的脚本是导致问题boxgrid.js的原因。查找GitHub的回购这里,该网站高达浪涌这里

安迪·霍夫曼(Andy Hoffman)

问题在于<div class="grid-overlay">内容在DOM中的位置。当前,其中有12个,每个列表项中有1个。您需要这些叠加层才能位于列表项之外。

查看以下gif。

在此处输入图片说明

我单击开始列表项之一,然后出现叠加层。与往常一样,单击地图锚不起作用。然后,我将<div class="grid-overlay">DOM拖到其列表项之外,然后将其放到前面</body>现在,样式有些混乱(需要应用背景颜色),但要点是地图锚点链接现在可以工作了。

一种解决方案是将所有<div class="grid-overlay">元素移到最前面,</body>并在每个元素上添加一个data属性,将其与远足目的地相关联。例如:

<div class="grid-overlay" data-belongs-to="Potato Mountain">

然后,您可以将此目的地与单击的列表项相关联:

<li class="grid-list-item" data-location="Potato Mountain">

在这一点上,您必须将原始脚本弄得有些混乱您想要更改:

$overlay = $item.children( 'div.grid-overlay' )

因为<div class="grid-overlay">元素将不再作为每个元素中的子元素驻留$item

祝你好运!

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

锚标签不起作用

来自分类Dev

锚标签不起作用

来自分类Dev

锚标签不起作用

来自分类Dev

锚标签的CSS样式不起作用

来自分类Dev

我的 <a> 标签不起作用?

来自分类Dev

锚标签在fancybox中不起作用

来自分类Dev

后续锚标签在html / php中不起作用

来自分类Dev

onclick对于少数锚标签不起作用

来自分类Dev

带有jQuery的锚标签不起作用

来自分类Dev

锚标签下载在移动设备上不起作用

来自分类Dev

锚标签在列表项中不起作用

来自分类Dev

锚标签的jQuery点击事件不起作用

来自分类Dev

使用文本作为锚标签的ASPX标签,其中编码标签不起作用

来自分类Dev

带锚标签的固定/固定标头-发现其他解决方案不起作用

来自分类Dev

绝对定位的锚标签在相对定位的锂内部不起作用

来自分类Dev

悬停在锚标签上以使未命名的列表可见〜不起作用

来自分类Dev

div内的锚标记不起作用

来自分类Dev

单击锚标记不起作用

来自分类Dev

单击锚标记不起作用

来自分类Dev

beautifulsoup-文本前面有img标签时,锚标签的过滤器文本不起作用

来自分类Dev

我尝试获取最新的git标签,但不起作用

来自分类Dev

如果我嵌入标签,onEnded事件不起作用

来自分类Dev

Google Map在我的“响应式”标签中不起作用

来自分类Dev

为什么我的标签页不起作用?

来自分类Dev

标签不起作用,我已尽力而为

来自分类Dev

npm install classnames在我的li标签中不起作用

来自分类Dev

按钮或标签不起作用

来自分类Dev

Plunker标签不起作用

来自分类Dev

标题标签不起作用