0

私はこのコードを持っています:

<!DOCTYPE html>
<body>
    <div id=div1 style="display:block;">
        <p id="intro">Hello World!</p>
        <p>This example demonstrates the <b>getElementById</b> method!</p>
    </div>
    <div id=div2 style="display:none;">
        <p id="intro">Hello World again!</p>
        <p>This example demonstrates the <b>getElementById</b> method!</p>
    </div>
    <button type="button" onclick="func()">Change div</button>
    <script>
        function func() {
            x = document.getElementById("div1");
            x.style.display = "none";
            x1 = document.getElementById("div2");
            x1.style.display = "block";
        }
    </script>
</body>

基本的にボタンクリックでdiv2を表示します。

div2 と div1 が同じファイルにある場合、これは正常に機能します。div2 を別のファイルに入れて、 url を変更せずにボタンをクリックすると表示されるようにします。

これを実現する 1 つの方法は、iframe を使用し、ボタンのクリック時に iframe の URL (div2 がある場所) を変更することです。

これを達成する他の方法はありますか？

私はhtmlとjavascriptに非常に慣れていないので、回答付きの説明が大いに役立ちます. ありがとう！

4

2 に答える 2

2

ページ全体をロードせずにページ上で動的に発生させたいこれらのタイプの場合、AJAX を使用する必要があります。

以下のコードは、jQuery を介して AJAX を使用する非常に基本的なテクニックを理解するのに役立ちます。

$(document).ready(function(){
    $("button").click(function(){
        alert('Load was performed.');
        $.get('target_file.html', function(data) {
            $('div').html(data);
            alert('Load was performed.');
        });
    });
});

<div>より具体的には、次のようにターゲット ファイルからそれを見つけることができます。

$("div").html(data.find("#div_id"));

もう一つ。PHP を使用する場合は、次の投稿を参照してください。

php: cURL で HTML ソース コードを取得する

于 2013-06-18T14:17:25.113 に答える
0

iframe を使用したくない場合は、AJAX を使用する必要があります。http://en.wikipedia.org/wiki/Ajax_(プログラミング)を参照

于 2013-06-18T14:13:47.767 に答える