ページリフレッシュなしでdivクラスボタンをクリックしてhtmlを読み込む方法

Question

html/css/jsをまだ学んでいるので、ごめんなさい。私がしたいことは、cssとjsから作られたdivクラスであるこのボタンをクリックすることです。ページをリフレッシュせずにコンテンツをロードすることができます。これはajaxやjqueryが必要ですが、ここに私のギターのページdanielroberto.github.ioとレポhttps://github.com/danielroberto/danielroberto.github.ioがありますので、あなたは私が何を意味するのかを知ることができます。私は基本的に、ナビゲーションボタンのいずれかをクリックして、新しいHTMLページ全体にリダイレクトすることなく、必要なコンテンツを読み込みます。たとえば、「写真」ボタンをクリックしたいときは、ボタンをクリックして画像を表示し、画像がbottomに表示されるようにしたいときは、photos.htmlのようなものにリダイレクトします。 「デザイン」ボタンをクリックするのと同じように、私はコンテンツをトランジションしてロードする必要があります。

Answer 1

ネット上には、AJAXに必要なイントロを得るための豊富なリソースがあります。全部ではなくウェブページの一部を読み込むテクニックです。

jQuery JavaScriptライブラリを使用してこれを行うことをお勧めします。選択肢はたくさんありますが、簡単に学ぶことができ、ネット上で広く使用されています。試してみた！ここ

スタート：あなたはあなたのイメージを提供するために、いくつかのサーバー側の技術を使用することを計画している場合のみとなりhttp://www.w3schools.com/jquery/jquery_ajax_intro.asp

。

表示する画像のリストを手作業で設定し、これらのボタンを繰り返し表示させる場合は、jQueryカルーセルプラグインを使用して、ある種のカルーセルを作成するのが最も良いでしょう。最初からすべてHTMLマークアップに含めてください。ここから選択するか、またはここに触発される負荷：https://plugins.jquery.com/tag/carousel/。

また、画像を表示している画面に合わせてサイズを変更する必要があります。 srcsetをご覧になることをお勧めします。テストサイトの画像は4600ピクセル幅でした。これをチェックしてください：https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

うまくいくといいですね。初期の仕事は難しい作業ですが、間もなくあなたはそれをやり遂げます。

Answer 2

jQueryの

HTML

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

JS

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

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

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

Answer 3

を使用してボタンをクリックしたときにあなたが簡単にあなたがあなたのコンテンツを保存することができ要素のHTMLを編集することができますあなたのjsのvar。次に、ボタンをクリックすると、テキストノードまたは要素を作成してdivに追加する関数を呼び出すことができます。

HTML

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

JS

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