Question

我正在使用一个使用Masonry的投资组合网站，并使用jQuery将每个网格元素链接到全尺寸图像（添加到整个div的链接）。

某些网格元素不应该链接到任何地方，所以我想知道是否可以在不触及原始代码的情况下删除这些元素的链接。它们每个都有自己的类，可以用作选择器。

我虽然删除（）或空（）但它不起作用，因为我不想删除div，我只想禁用与之关联的链接。

代码

抱歉，它是一个庞大的文件，HTML也是通过JS构建的。这是有时间掌握它的人的完整文件：http://jsbin.com/UMILIXi/1/edit?js,output

创建元素模板的部分位于：

//ITEM IMAGE TEMPLATE
                item: '<% if(item.gridInternalLink){ %>\
                <div class="' + o.itemClass + ' gridTextBox gridInternalLink" style="width:<%= width %>px;">\
                <p><%= item.gridTextBox %></p>\
                <% }else if(item.gridExternalLink){ %>\
                <div class="' + o.itemClass + ' gridTextBox gridExternalLink" style="width:<%= width %>px;">\
                <p><%= item.gridTextBox %></p>\
                <% }else if(item.gridNoLink){ %>\
                <div class="' + o.itemClass + ' gridTextBox gridNoLink" style="width:<%= width %>px;">\
                <p><%= item.gridTextBox %></p>\
                <% } else if(item.gridVideoLink){ %>\
                <div class="' + o.itemClass + '" style="width:<%= width %>px;">\
                <%= item.gridVideoLink %>\
                <% }else{ %>\
                <div class="' + o.itemClass + '" style="width:<%= width %>px;">\
                <img src="<%= item.image %>" width="<%=width%>"/>\
                <div class="' + o.itemInfoClass + '"><div class="' + o.itemTextClass + '">\
                <% if(item.link){ %><a href="<%= link %>" rel="<%= rel %>" title="<%= title %>"><% } %>\
                <div class="text-wrapper">\
                <% if(item.cat){ %>\
                <h3 class="post-info"><%=item.cat%></h3>\
                <% } %>\
                <h2><%= item.title %></h2></div><div class="view-gallery">\
                <% if(item.imgnum){ %><span class="item-num"><%= item.imgnum %></span><% } %>\
                <span class="grid-gallery-icon<%= additionalClass %>"></span><span class="view-text"><%= viewText %><span class="more-arrow">&raquo;</span></span>\
                </div><% if(item.link){ %></a><% } %>\
                </div></div>\
                <% } %>\
                </div>'

Answer 1

您可以简单地阻止链接的默认操作：

$('#container').on('click', '.linkClass', function(e){
   e.preventDefault();
});

Answer 2

使用此代码删除div的href

$('.linkClass').attr('href','#');

Answer 3

这可能会有所帮助

  $('div.yourClassName').append('<div id="over" style="position: absolute;top:0;left:0;width: 100%;height:100%;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>');

Answer 4

您有条件地添加锚标记的位置，您是否也可以检查gridNoLink属性并相应地添加锚点或跨度？

类似的东西：

<% if(item.gridNoLink) { %>
  <span>
<% } else if(item.link){ %>
  <a href="<%= link %>" rel="<%= rel %>" title="<%= title %>">
<% } %>\
<div class="text-wrapper">\
...desired markup
</div>
<% if(item.gridNoLink) { %>
  </span>
<% } else if(item.link){ %>
  </a>
<% } %>\

这样就不需要额外的脚本来处理没有链接的图块。此外，它还将确保您不会在悬停时更改光标但不会触发任何单击操作的锚标记。

使用jQuery禁用div的链接

4 个答案: