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> 

我需要做的是，将button布局更改为其他两种样式。页面包含三个按键，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"); 
});