我的锚标签不起作用。

Question

The issue is as it says in the title, clicking on an image wrapped with an anchor tag doesnt work.

Here is an example of on grid list item:

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

grid-overlay remains hidden until the user clicks on the grid item. Once clicked the info section is displayed. Within the info section there is a map and a graph that should open a new anchor tag once they are clicked.

My guess is that the script I used to achieve this effect is what is causing the issue boxgrid.js . Find the github repo here and the site is up on surge here .

Answer 1

The problem is with where the <div class="grid-overlay"> content resides in the DOM. Currently, there are 12 of them, 1 inside each list item. You'll need these overlays to live outside of the list items.

Check out the following gif.

I click on one of the starting list items and the overlay comes up. As usual, clicking on the map anchor doesn't work. Then I drag the <div class="grid-overlay"> DOM outside of its list item and drop it right before </body> . The styles are a little messed up now (needs a background color applied), but the point is that the map anchor link now works.

One solution to this would be to move all the <div class="grid-overlay"> elements just before </body> and add a data attribute on each one, associating it with the hiking destination. For example:

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

Then, you could associate this destination with the clicked list item:

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

At this point, you'd have to mess with the original script a little. You'd want to change:

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

because the <div class="grid-overlay"> elements would no longer reside as children inside of each $item .

Good luck!