[JS] クリックしたら別ファイルの内容を表示する

ボタンやメニューをクリックしたら、別のコンテンツを表示するための方法です。

同じファイルで切り替えを行う場合はこちら

JavaScript で別のファイルを動的に読み込むことで実現可能です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="menu">
    <button onclick="loadContent('content1.html')">1 を表示</button>
    <button onclick="loadContent('content2.html')">2 を表示</button>
    <button onclick="loadContent('content3.html')">3 を表示</button>
</div>

<div id="content"></div>

<script>
    function loadContent(url) {
        fetch(url)
            .then(response => response.text())
            .then(data => {
                document.getElementById('content').innerHTML = data;
            })
            .catch(error => {
                console.error("There was an error loading the content:", error);
            });
    }
</script>
</body>
</html>

呼ばれるコンテンツのファイルを用意します。こちらの html ファイルは JavaScript から取得されるため、Webサーバなどが立ち上がっている必要があります。ローカルであれば、http://127.0.0.1/contents1.html といったURLでアクセスできる必要があります。

1です
2です
3です

JavaScriptJavaScript

Posted by kidatti