動的ボックスにリンクする動的ボタンを持つdivまたはiframeコンテナ

Question

簡潔にするために、動的HTMLまたは.jsまたはajaxまたは.asの動作を正確にはわかりませんが、多くのWebサイトで動的コンテンツiframeまたは部門（<div>）を使用します。基本的には、3つのボタン（w：150px h：30pxのdiv）が、その下のボックス（iframeまたはdiv）と一直線に並んでいます。ボタン1をクリックすると、その下のボックスは、実際にページを変更したり、ページ全体をリロードしたりすることなく、異なるコンテンツに変更されます。私の質問は、それを成功させる方法です。

ご質問ありがとうございました。

は素晴らしい一日を、

Blane

体の幅は800ピクセル、高さ100％ は、私は高さの両方では50pxでヘッダーと足を持っており、本体を約2400px高さです。本体には幅が700px、左右に50pxの余白がある別のコンテナがあります。左に浮かぶ2つのボックスがcolumn1とcolumn2と呼ばれています。 Column1は300pxの幅と300pxの高さの画像を保持しますが、必ずしも画像そのもののサイズではありません。もう1つの列2は400px：w×300px：hです。そして、それは部品に分解され、底部には400pxのコンテナがあります：wは30px：hです。これは4つの部分に分割され、各部分の幅は100ピクセルになります。これは私のダイナミックなボタンを収容する。列の下に、divは変更されるコンテンツを保持する別個の部門です。私はそれをメインコンテナと同じ属性に設定しました（w：700px h：400px margin-left/right：50px）。それは私が立ち往生している場所です、私はHTMLで動的コンテンツに関するチュートリアルをGoogledしましたが、私が探していたものは見つかりませんでした。画面や動画の読み込みやそれ以外の操作はすべて夢中になりました。私はちょうどそれが何らかの意味をなさない場合、クリックリフレッシュをリフ

Answer 1

ここでは、JavaScriptのjQueryプラグインを使用した簡単な例を示します。これは単純なJavaScriptで行うことができますが、もっと多くの作業が必要です。

<input class="btn" type="button" id="A" value="A"> 
<input class="btn" type="button" id="B" value="B"> 
<input class="btn" type="button" id="C" value="C"> 
<div class="lower A">A</div> 
<div class="lower B" style="display:none">B</div> 
<div class="lower C" style="display:none">C</div> 

JS：

$('.btn').click(function() { 
    $('.lower').hide()  <-- this hides everything with a class of "lower" 
    $('.'+ $(this).attr('id')).show() <--- this grabs the ID of the button and shows everything that has a class matching the ID 
}) 

Answer 2

あなたがAJAXを使用して、データベースまたは別のWebサイトや他のウェブページのうち、このデータを取得する必要があります動的なコンテンツを取得するために。私は読んで、learning JQueryはかなりシンプルで他の言語と同様に、論理的な流れに従うことをお勧めします。 JQueryの構文も非常にシンプルなので、あまりにも難しくはありません。しかし、私は逃げる。

次のようにHTMLの構造がある場合：

<div id="container"> 
    <div id="panel1" class="panel"> 
     <a href="#" class="button" id="btn-1">Button 1</a> 
     <div id="iframe-1"></div> 
    </div> 
    <div id="panel1" class="panel"> 
     <a href="#" class="button" id="btn-2">Button 2</a> 
     <div id="iframe-2"></div> 
    </div> 
    <div id="panel1" class="panel"> 
     <a href="#" class="button" id="btn-3">Button 3</a> 
     <div id="iframe-3"></div> 
    </div> 
</div> 

とあなたのCSSは、おおよそ次のようになります。

はJQueryを使用して

.panel{ 
    float:left; 
} 

/* Initially hide all iframe divs */ 
.panel > div{ 
    display:none 
} 

/* Initially show only the first iframe div */ 
.panel > div:first-child{ 
    display:block; 
} 

、あなたが使用することができます。

と同様に

//Run the code after the elements of the page have been downloaded. This is usually how most JQuery syntax starts. 
$(document).ready(function(){ 
    //When the button is clicked, run a function 
    $('.button').click(function(e){ 
     e.preventDefault(); //Prevents default click behavior; similar to defining onclick='return false;' in the <a /> tag. 
     $('.button').siblings('div').hide(); //Hide all open iframe divs 
     $(this).siblings('div').show(); //Show the iframe div corresponding to clicked link 
     var id = $(this).attr('id').replace('btn-','iframe-'); //Get the ID of the link clicked and replace 'btn-' with 'iframe-' 
     $('#'+id).load('http://<url of the page you want to load>'); //Load the new web page or content into the iframe div. This could be an absolute or relative path. 
    }); 
}); 

.load()の機能には、.ajax()という機能もあります包括的なまた、Javascriptの仕組みは、クライアントコンピュータでコンパイルされ、ページが読み込まれたときに一度実行されることです。したがって、ページのHTMLに追加されている動的データを取得する場合、クリック、ホバーなどのアクションは、新しいコンテンツに対してリロードする必要があります。 JQueryの.on()イベントまたは.delegate()イベントを使用する必要があります。

これが役に立ちます。