JavaScript jQuery どちらでも構いません。

初めて質問させて頂きます。
皆様、宜しくお願いいたします。

HTML5（宣言のみHTML5のような程度）で作成したwebページにてタブUIを設置しました。
各タブにa要素があり、そのa要素のリンクは各タブコンテンツへidにてリンクが設置してあり、クリックするとそのid名を元に内容が切り替わるというものです。

そこで、ここからが質問なのですが・・・
・まずページを読み込んだ段階で、任意に指定したid名のタブ内に外部htmlファイルを読み込み表示
・違うタブをクリックすると、現在表示されているコンテンツ内容を削除し、そのタブ内にid名を元に外部htmlファイルを読み込み表示。
、、、と。
このような処理はJavaScriptやjQueryで実装するよりも、
PHPの方が現実的でしょうか？

現在、JavaScipt(jQuery)を学習中でして、
出来ればJavaScript(jQuery)にて実装する方法をお教え頂ければと思います。

文章が伝わりずらいかもしれませんが、よろしくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

PHPはサーバサイドスクリプトでJavaScriptはクライアントサイドスクリプトなので、
基本的には相互に代替手段にはならないと思います。（工夫次第かもしれませんが）

特に明記はされていませんが、画面遷移ではなく非同期で処理を行いたいかと思いますので、
JavaScript(jQuery)にてクライアントサイドの処理を書き、
データベースへのアクセス等の処理がある場合のみPHPと併用してみてはどうでしょうか。

静的なHTMLを読み込むだけであればjQueryはとても簡単に実装できるようになっています。

簡単なサンプルを書いておきますね。
注意として別ドメインの場合、正しく取得することが出来ないかもしれないです。

lang
1<ul>
2    <li><a href="#" id="link1" class="link">リンク１</a></li>    
3    <li><a href="#" id="link2" class="link">リンク２</a></li>
4</ul>
5<div id="content">
6</div>

lang
1$(function() {
2
3    // linkというclassがついたa要素をクリックすると処理を行う
4    $("a.link").on("click", function() {
5
6        // いったん空にする（これ必要ないかもしれないです）
7        $("#content").html("");
8
9        // パスを作成（同じディレクトリならそのままでも）
10        var loadPath = "./" + $(this).prop("id") + ".html";
11
12        // contentというidがついた要素に外部HTMLを読み込む
13        $("#content").load(loadPath);
14    });
15});