點擊子圖像鏈接進入到母公司的背景圖像鏈接

我有這個頁面： 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（）;但後來完全禁用鏈接，我只是不希望它的鏈接工作時點擊圖標，否則鏈接應該工作。 –

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

點擊子圖像鏈接進入到母公司的背景圖像鏈接

回答

相關問題