点击子图像链接进入到母公司的背景图像链接

我有这个页面： http://test.actful.com/demo/actfulhome-hovertile2.html 点击子图像链接进入到母公司的背景图像链接

我们有这个页面上平铺图像，并悬停存在被显示为每一分几个图标。有一个背景链接，每个图标都有自己的链接（当前只是“＃”），背景链接打开一个模式并显示一个页面。目前当我点击图标后台链接是有效的，模式打开。我不想让背景链接在单击图标上的链接时生效。我该如何做到这一点。我试着为背景设置较低的z-index属性，并为图标设置较高的z-index属性，但这并没有解决问题。我该如何解决这个问题？

，您可以查看的HTML页面的源代码，但让我成为一个更具体一点

下面是用于每个图块代码：

<div class="contenthover actfulModalButton"> 
        <div> 
        <div class="four columns icon-align-center align-left"><a class="tile-icon-link" href="#"><img class="tile-icon-images" src="images/ActfulIcons_ActfulFBIcon.svg" alt="Face Book"/></a></div> 
        <div class="four columns icon-align-center align-center"><a class="tile-icon-link" href="#"><img class="tile-icon-images" src="images/ActfulIcons_ActfulKangarooIcon.svg" alt="Actit"/></a></div> 
        <div class="four columns icon-align-center align-right"><a class="tile-icon-link" href="#"><img class="tile-icon-images" src="images/ActfulIcons_actfulCommentsIcon.svg" alt="Comments"/></a></div> 
        </div> 
        <div class="button-bottom"> 
        <button data-act-itemid="100" class="small button actfulModalButton">View Details</button> 
        </div> 
       </div>

底部以下的jQuery代码jQuery的创建链接为“actfulModalButton”（父背景DIV）页面加载：

 $(".actfulModalButton").click(function() {  
    var itemid = $(this).attr('data-act-itemid'); 
    $("#actItemFrame").attr('src', 'actful-item-details.html?actitemid='+itemid); 
    $("#actItemModal").reveal(); 
    });

我希望这有助于。

感谢，

来源

2013-01-07 asif-007

请在这里添加一些代码，所以我们可以看到这是怎么回事 –

感到很抱歉，我加入了一些代码为每瓦。因为它是纯HTML，CSS和Jquery，你也可以查看源代码。我希望这有帮助。 –

$(".actfulModalButton").click(function(event) { 
    event.stopPropagation(); // this code will prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. 
    var itemid = $(this).attr('data-act-itemid'); 
    $("#actItemFrame").attr('src', 'actful-item-details.html?actitemid='+itemid); 
    $("#actItemModal").reveal(); 
});

[更新]

我现在明白你想要什么。

你只需要添加以下，并保持你的代码不变：

$(".actfulModalButton a.tile-icon-link").click(function(event) { 
    event.stopPropagation(); // this code will prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. 
});

来源

2013-01-07 09:57:20 pktangyue

我试着添加event.stopPropagation（）;但后来完全禁用链接，我只是不希望它的链接工作时点击图标，否则链接应该工作。 –

真棒:)，非常感谢你的工作。 –

点击子图像链接进入到母公司的背景图像链接

回答

相关问题