0

HTML ページには 3 つのフレームが含まれています。

<frameset cols="30%, *">
 <frame src="frame_a.htm">
  <frameset rows="60%, *">
   <frame src="frame_b.htm">
   <frame src="frame_c.htm">
 </frameset>
</framset>

私がする必要があるのは、ボタンのクリック イベントでそのフレーム レイアウトを他の 2 つのスタイルに変更することです。ページには、1) デフォルト スタイル、2) スタイル 2、3) スタイル 3 の 3 つのボタンが含まれています。

<!-- Style-2 -->
<!--
<frameset cols="*, 30%">
 <frameset rows="60%, *">
  <frame src="frame_b.htm">
  <frame src-"frame_c.htm">
 </frameset>
<frame src="frame_a.htm">
</frameset>
-->
<!-- Style-3 -->
<!--
<frameset cols="30%,35%,35%">
  <frame src="frame_a.htm">
  <frame src="frame_b.htm">
  <frame src="frame_c.htm">
</frameset>
-->

ページが読み込まれ、ユーザーがボタン 2 または 3 をクリックし、ページがそれぞれスタイル 2 または 3 に変更されたときに、これを行うにはどうすればよいですか。

CSS は便利なオプションですが、ここでは CSS を使用したくありません。この点について私を導いてください。

4

1 に答える 1

1

jsFiddle デモ

デモではフレームにボタンを追加できないため、プロンプトを追加してページを更新し、新しい値を入力して別のスタイルを表示できるようにしました。

HTML:

<button id="btn1">Default</button>
<button id="btn2">Style 1</button>
<button id="btn3">Style 2</button>

JS:

$('#btn1').click(function () {
    $('#fset1').attr('cols', '30%, *');
    $("#frame1").appendTo("#fset1");
    $("#frame2").appendTo("#fset2");
    $("#frame3").appendTo("#fset2");
    $('#fset2').appendTo("#fset1");
});
$('#btn2').click(function () {
    $('#fset2').appendTo("#fset1");
    $('#fset1').attr('cols', '*, 30%');
    $("#frame1").appendTo("#fset2");
    $("#frame2").appendTo("#fset2");
    $("#frame3").appendTo("#fset1");
});
$('#btn3').click(function () {
    $('#fset1').attr('cols', '30%,35%,35%');
    $("#frame1").appendTo("#fset1");
    $("#frame2").appendTo("#fset1");
    $("#frame3").appendTo("#fset1");
    $('#fset2').appendTo("#fset1");
});
于 2013-04-09T06:05:03.090 に答える