1

ページの左側にいくつかのリンクがある場合、リンクをクリックしたときに同じページに別の HTML ファイルのコンテンツを表示するにはどうすればよいですか?

4

1 に答える 1

2

簡単な解決策: iframes、より良いが少し難しい解決策: AJAX.

  • iFrame
    iframe を作成するには、ソース コードに次のように記述します<iframe src="the/URL/of/a/page.html"></iframe>。これにより、ファイルthe/URL/of/a/page.htmlが iframe に表示されます。iframe は CSS でスタイルを設定できます (参考までに)。次に、すべての<a>sa クラスを指定します。link例として JavaScript を使用し、iframe に ID を指定しました (私は を使用しましたiframe)。（JS AFAIKなしでそれを行う方法はありません。または、<frameset>非推奨の a を使用する必要があります。）JSの例：

    var links = document.getElementsByClassName("link"); // Get all the elements with the class link

for (var i; i < links.length; i++) { // Loop over all the links
    links[i].onclick = function(e) { // Tell them what to do when they're clicked
        e.preventDefault(); // Prevent the browser from navigating to the address of the links href
        document.getElementById("iframe").src = links[i].href; // Set the iframe's src to the href of the a.
    }
}

  • AJAX
    これは少し難しく、jQueryのようなライブラリを使用すると、このタスクが大幅に簡素化されます。私の例では jQuery を使用しています。それ以外の場合は、さらに多くのコード行が必要になります。読み込まれたページを表示し、ページに配置して ID を付与するには、
    が必要です(この例では使用しました)。ソリューションとは対照的に、AJAXは通常、同じドメインのファイルでのみ機能することに注意してください（ただし、SOでいくつかの回避策/ハックを見たと思います）。例：divresultboxiframe

    $(".link").click(function(e) { // If an element with the class 'link' get's clicked...
    e.preventDefault();
    $("#resultbox").load("the/URL/of/a/page.html"); // ... load the contents of the file at the/URL/of/a/page.html into the element with the ID 'resultbox'
});

注：私はこれをテストしませんでした。

于 2013-02-18T18:56:33.247 に答える