javascriptをつかったテーブルのフレーム構成で再度ながらご教示ください。


↑のいいかたで いいかも よく分からないのですが・・

おかげさまで、大変お世話になりながら m(_ _)m
この初心者の私でも なんとか・・・
ちゃくちゃくと ホームページ作成は すすめているのですが・・・
皆様には 大変感謝して おります。m(_ _)m

http://q.hatena.ne.jp/1368055717 のつづきになるのですが、
つづきの 質問を ご勘弁ください。

http://jsfiddle.net/a_kuma3/MbDTy/3/embedded/result/
をサンプルに 左のABCのリンクを 複数 つくると
たとえば 左のリンクに

ABC
EFG
HIJ

と↑のようにつくった場合、最初のナビゲーションで
EFG のリンクを つつくと 右側の テーブルの中に
HTMLは表示されず、新しいウィンドウで開いてしまいます。
これを最初のナビゲーションでABCのリンクをつつくと
右側のテーブルの中にHTMLが表示され、そのあとはEFGの
リンクをつついても右側のテーブルの中に無事にHTMLが
表示されます。

当方Windows7 IE9 Firefox20.0.1で確認しております。
大変 お手数かけますが、よろしくお願いします。

この いいかた で わかりますでしょうか・・・・

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2013/05/11 16:43:19
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.1

回答回数4971ベストアンサー獲得回数2153

ポイント220pt

jsFiddle のサンプルを更新してみました。
http://jsfiddle.net/a_kuma3/MbDTy/4/embedded/result/

  • リンクの id 属性を、class 属性に変えました
  • フレームを作る処理は、class 属性を目印にします
  • フレームの存在チェックをし、無かった場合だけ作るようにしました

ソースの抜粋がこちらです。

<script>
$(function() {
    // ★セレクタを id 指定から、class 指定に変えます
    $(".anchor").click(function() {
        // ★フレームの存在チェックをし、無かった場合だけフレームを作るようにします
        if ($(".display").length == 0) {
            var s = "<iframe name='display' class='display'></iframe>";
            $("#area").html(s);
        }
    });
});
</script>

<td bgcolor="#ffffff" valign="top">
    <!-- ★id 属性を class 属性に変えました --><a href="http://www.yahoo.co.jp/" target="display" class="anchor">ABC</a><br>
    <!-- ★リンクを増やします。最初のリンクと同じ class 属性を付けます --><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br>
</td>
id:meichi

すいません、いま 作業(というほどではないですね)(コピペだけすが)
が おわりました。

確認できました。 本当にありがとうございます。

これで、質問を終了します。

・・・今日、ホームページを ほかの方(数名)に見ていただきました。
   クローバーが 動いているのを 見て ビックリされてました・・・
   感謝です・・・・

もう少しで できます・・・・来月には アップロードできそうです。

2013/05/11 16:41:52
id:a-kuma3

とりあえず動いてますけど、重たいのがちょっと気になりますね。
最近のPCだと、気にするほどじゃないのかな?

何はともあれ、頑張ってください♪

2013/05/11 16:56:14

その他の回答1件)

id:a-kuma3 No.1

回答回数4971ベストアンサー獲得回数2153ここでベストアンサー

ポイント220pt

jsFiddle のサンプルを更新してみました。
http://jsfiddle.net/a_kuma3/MbDTy/4/embedded/result/

  • リンクの id 属性を、class 属性に変えました
  • フレームを作る処理は、class 属性を目印にします
  • フレームの存在チェックをし、無かった場合だけ作るようにしました

ソースの抜粋がこちらです。

<script>
$(function() {
    // ★セレクタを id 指定から、class 指定に変えます
    $(".anchor").click(function() {
        // ★フレームの存在チェックをし、無かった場合だけフレームを作るようにします
        if ($(".display").length == 0) {
            var s = "<iframe name='display' class='display'></iframe>";
            $("#area").html(s);
        }
    });
});
</script>

<td bgcolor="#ffffff" valign="top">
    <!-- ★id 属性を class 属性に変えました --><a href="http://www.yahoo.co.jp/" target="display" class="anchor">ABC</a><br>
    <!-- ★リンクを増やします。最初のリンクと同じ class 属性を付けます --><a href="http://www.goo.ne.jp/" target="display" class="anchor">DEF</a><br><a href="http://q.hatena.ne.jp/" target="display" class="anchor">HIJ</a><br>
</td>
id:meichi

すいません、いま 作業(というほどではないですね)(コピペだけすが)
が おわりました。

確認できました。 本当にありがとうございます。

これで、質問を終了します。

・・・今日、ホームページを ほかの方(数名)に見ていただきました。
   クローバーが 動いているのを 見て ビックリされてました・・・
   感謝です・・・・

もう少しで できます・・・・来月には アップロードできそうです。

2013/05/11 16:41:52
id:a-kuma3

とりあえず動いてますけど、重たいのがちょっと気になりますね。
最近のPCだと、気にするほどじゃないのかな?

何はともあれ、頑張ってください♪

2013/05/11 16:56:14
id:meichi

ご回答 大変 ありがとう ございます。m(_ _)m

いま 帰ってきて見させて いただきました。 大変感謝しています。

あとで、ちょっと やってみます。 自分には、コピペしかできませんが・・

また、なにか あれば コメントに 記載させていただければと思います。

id:dawakaki No.2

回答回数797ベストアンサー獲得回数122

ポイント30pt

2箇所のフレーム画面を同時に変更する
http://www.red.oit-net.jp/tatsuya/java/frame0a.htm

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません