javascript - 运行时 HTML 页面布局更改

Question

一个 HTML 页面包含三个框架。

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

我需要做的是，在按钮的单击事件中将该框架布局更改为其他两种样式。页面包含三个按钮，1）默认样式，2）样式2，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。在这方面指导我。

Answer 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");
});