重新加載特定div

-1

我想在網頁上顯示一系列圖像。重新加載特定div

該網站是靜態的，沒有服務器端語言。

有沒有辦法讓網站加載類似這樣的img1，img2，img3等，而不是重新加載整個頁面後點擊。

我對html和css很新，但願意根據需要閱讀JavaScript。

關鍵是要儘可能少的網站加載。所以任何其他技巧將不勝感激。

獎金，如果有任何其他網站優化我沒有想到。

來源

2014-09-03 Techmatt00

您需要使用JavaScript才能做到這一點。像這樣：http://jsfiddle.net/yMzX9/133/（改編自：http://jsfiddle.net/GloverDonovan/yMzX9/）。您可能也會從查找jQuery click（）和toggle（）事件中受益。 – 2014-09-03 22:02:29

嗯，我不知道我是否投了票我絕對研究了我的問題，但無法找到一個不涉及使用PHP的答案。無論如何，亞歷克斯我注意到你的答案是一種使圖像可見或不可見的方式。我正在尋找的是一種方式來加載該div與另一個圖像，而不再顯示第一個圖像。有點像img1 ...點擊... img2 ...點擊.... img3 – Techmatt00 2014-09-03 22:07:50

這個問題可以用更多的「研究」來解答。嘗試閱讀此搜索的頂部結果：https：//www.google.com/search?q=show+image+after+click&oq=show+image+after+click&aqs=chrome..69i57j0l3.5033j0j7&sourceid=chrome&es_sm=122&ie = UTF-8＃q = html + show + image +點擊+ – 2014-09-03 22:10:34

雖然你有一個公認的答案，但這裏就是你要找的人正是更換的DIV點擊

HTML

<input type="button" id="btn1" value="ClickMe"> 
<div id="dv1"> 
    <img id="img1" src=""> 
</div>

jQuery的

$(document).ready(function() { 
    var check=0; 
    $('#btn1').click(function() { 
    var clicks = $(this).data('clicks'); 
    if (clicks) { 
     $("#img1").attr('src', 'url1'); 
    check++; 
    } else { 
     if(check==0){ 
    $("#img1").attr('src', 'url2'); 
     }else{ $("#img1").attr('src', 'url3');} 
    } 
    $(this).data("clicks", !clicks); 
}); 
});

工作DEMO

來源

2014-09-03 22:40:11

謝謝！我感到有點沮喪，我真的很感謝答案！ – Techmatt00 2014-09-03 23:27:54

您可以創建在HTML圖像標記與空src屬性：

<img src="" id="image-1"> 
<img src="" id="image-2"> 
<img src="" id="image-3"> 
<a href="#" id="but-1">Load image 1</a> 
<a href="#" id="but-2">Load image 2</a> 
<a href="#" id="but-3">Load image 3</a>

然後，通過JavaScript，您可以監聽每個鏈接的點擊事件，並填充每個圖像的src：

document.getElementById('but-1').on("click", function(){ 
    document.getElementById("image-1").src="path/to/image.jpg"; 
}) 
document.getElementById('but-2').on("click", function(){ 
    document.getElementById("image-2").src="path/to/second-image.jpg"; 
}) 
//... and so on

這樣，每次點擊一個鏈接，每個相應的圖像將加載。

來源

2014-09-03 22:07:27 Marquizzo

重新加載特定div

回答

相關問題