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 Demo

该演示不允许我在框架中添加按钮，因此我添加了一个提示，以便您可以刷新页面并输入新值，以便查看不同的样式。

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

运行时HTML页面布局更改

1 个答案: