如何從沒有頁面刷新的單擊div類按鈕加載html

-4

由於我仍在學習html/css/js，所以我很抱歉提出一個簡單的問題。我想要做的是能夠點擊這個由css和js構成的div類的按鈕來加載它的內容而不刷新頁面，我相信它需要ajax或jquery，但不知道如何。這裏是我的github頁面danielroberto.github.io和回購https://github.com/danielroberto/danielroberto.github.io，所以你可以瞭解我的意思。我基本上想要點擊任何導航按鈕，然後加載任何我想要的內容而不重定向到全新的HTML頁面。例如，當我想點擊「攝影」按鈕時，我希望按鈕效果發生在我的圖像加載到底部而沒有重定向到photography.html之類的情況下。類似於點擊「設計」按鈕，我希望它轉換並加載我的內容。如何從沒有頁面刷新的單擊div類按鈕加載html

來源

2016-12-14 Daniel Roberto

看看[這篇文章的MDN（https://developer.mozilla.org/en-US/docs/AJAX）或谷歌「Ajax教程」。 – gyre

網絡上有豐富的資源來獲得您需要的簡介AJAX - 加載網頁部分而不是整個網頁的技術。

你正確地建議你可以使用jQuery JavaScript庫來做到這一點 - 有很多的選擇，但這很容易學習，並在網上廣泛使用。嘗試和測試！

從這裏開始：http://www.w3schools.com/jquery/jquery_ajax_intro.asp

，如果你打算使用一些服務器端的技術來服務您的圖像，就只能是。

如果您只是要手動設置要顯示的圖像列表，並且您希望按鈕循環顯示這些圖標，那麼您最好只是使用jQuery旋轉木馬插件構建某種類型的旋轉木馬，並從一開始就將它包含在您的HTML標記中。負載選擇或從這裏獲得靈感：https://plugins.jquery.com/tag/carousel/。

此外，您應該調整您的圖像以適合您所服務的屏幕。我建議你看看使用srcset。測試網站上的圖像寬度爲4600px！看看這個：https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

我希望它順利。早期的工作可能很艱苦，但你很快就會掌握它的。

來源

2016-12-15 00:05:11 raffjones

是的，OP @DanielRoberto _「需要ajax或jquery」_它不是ajax _ **或** _ jquery - jquery是_one_庫，可以幫助你做ajax。你也可以在沒有庫的普通js中做ajax，這只是更多的工作。 –

點擊使用jQuery

HTML

<div class="my-button">click here</div> 
    <div class="my-content">init content</div>

contentElement = $('.my-content'); 

    $('.my-button').click(function() { 
     contentElement.html('new content'); 
    });

https://jsfiddle.net/jaxon58/zp9mvu38/

來源

2016-12-15 00:11:03 Jaxon

你可以在你的內容存儲在一個按鈕時，您可以輕鬆地編輯元素的HTML在你的js中一個var。然後當你點擊你的按鈕時，你可以調用創建文本節點或元素的函數，並將其附加到你的div。

HTML

<button onClick="function()"></button> 
<div id="show-data"> 
</div>

var newText = 'Stuff here'; 
function function() { 
    var div; 
    div = document.getElementById('show-data'); 
    div.appendChild(document.createTextNode(newText)); 
}

來源

2016-12-15 01:03:04

如何從沒有頁面刷新的單擊div類按鈕加載html

回答

相關問題