質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • JavaScript

    17023questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6930questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1117questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 3
  • VIEW 778

FrontChan

score 13

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

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

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

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

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

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

<ul>
    <li><a href="#" id="link1" class="link">リンク1</a></li>    
    <li><a href="#" id="link2" class="link">リンク2</a></li>
</ul>
<div id="content">
</div>

$(function() {

    // linkというclassがついた要素をクリックすると処理を行う
    $("a.link").on("click", function() {

        // いったん空にする(これ必要ないかもしれないです)
        $("#content").html("");

        // パスを作成(同じディレクトリならそのままでも)
        var loadPath = "./" + $(this).prop("id") + ".html";

        // contentというidがついた要素に外部HTMLを読み込む
        $("#content").load(loadPath);
    });
});


投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/01/18 05:14

    ありがとうございます!
    実装のイメージが湧いてきました、参考になる回答ありがとうございました!(^ ^)

    キャンセル

0

↓そういう例はたくさんあると思います。
タブ切り替えで外部htmlを読み込む [AJAX・jQuery 使用] 

↓ここでコードの解説をしてるので、一読されてはいかがでしょうか。
jQuery UI逆引きリファレンス タブ・パネルの挙動をカスタマイズするには?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/01/18 05:15

    回答ありがとうございました!今後の制作に役立つ回答ありがとうございます!^ ^

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 受付中

    javascriptもしくはjqueryで画像をダウンロードさせたい

    javascript、もしくはjQueryを使って指定のリンクを開くのではなく保存させる方法を教えて下さい。 リンク先は画像を考えています。

  • 受付中

    スクロールとクリック制御がバッティングする

    以下のように600px以上スクロール時に「hoge」という固定フロートメニューを表示し 内部のリンクをクリックするとページ下部「hoge-anchor」要素へページ内遷移します。

  • 解決済

    内包する子要素のリンクを別子要素にも適用したい

    内包する子要素のリンクを別子要素にも適用したいです。 具体的には、以下の構成で「hoge1」をクリックすると「hoge2」と同じURLに移動したいです。 <div class="

  • 解決済

    jQueryで画像を表示するとページ読み込みは遅くなるのか?

    サイトやブログ等に画像を沢山載せるとそれだけページの読み込みが遅くなりますが、jQueryで表示する画像等でも遅くなるのでしょうか? 例えば、下記のサイトで紹介されているものは要

  • 解決済

    jQueryでトリミング

    jQueryで画像をトリミングしたいと考えています。見よう見真似でプログラムを作成したのですがトリミングした画像がどうしても出ないです。よろしければ、ご鞭撻のほどよろしくお願いしま

  • 受付中

    fantomjsについて。 htmlから呼び出す方法

    javascriptにて、スクレイピングをしようと思っています。 そこで、ググったところfantomjsというものを見つけました。 現在、ターミナルからであれば呼び出し

  • 解決済

    アコーディオンメニューで親項目にもリンクを持たせる

    このようなページ構造で、アコーディオンメニューを作りたいです。 会社概要(親ページ) ┗社長挨拶(子ページ) ┗沿革(子ページ) ┗アクセス(子ページ) 一般的な

  • 解決済

    jQuery初心者 jQueryについて

    jQuery初心者です よくわからないことがあります jQueryは説明書きを読んでいると ⓵他の言語と同様にテキストエディタに直接コーディング ⓶公式サイトからファイ

同じタグがついた質問を見る

  • JavaScript

    17023questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6930questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Ajax

    1117questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。