Question

如何将1个表与其他页面中的另一个表合并？

我基本上有3个单选按钮。

我的意图是，当我首先打勾A，然后它会显示网站A和下一个同时勾选B ...我也可以查看网站A ...所以在思考B ...我会看到网站A在我的左边＆amp;我右边的网站B.

但我的下面的代码无法按照我的预期工作......它将显示我勾选的最后一个单选按钮的内容。

请帮助.TQ

<!DOC HTML>
<HTML>
<TITLE></TITLE>
<HEAD>
<script type="text/JavaScript">

<!--
function show(id)
{
 if (document.getElementById(id).style.display == 'none')
 {
      document.getElementById(id).style.display = '';
 }
}
//-->

<!--
function hide(id)
{
      document.getElementById(id).style.display = 'none';

}
//-->
</script>

</HEAD>
<BODY>
<table cellspacing="1" cols="3" border="0">
<tbody>
<tr valign="top" align="left">
  <td width="202"><b>Please, select option</b></td>

  <td width="481">A
    <input type="radio" name="Option" onfocus="hide('tblB');hide('tblC');show('tblA');">
    B
    <input type="radio" name="Option"           
onfocus="hide('tblA');hide('tblC');show('tblB');return true;">
    C      
    <input type="radio" name="Option"  
onfocus="hide('tblA');hide('tblB');show('tblC');return true;">
  </td>
 </tr>
 </tbody>
</table>


<table id="tblA" style="DISPLAY: none" cols="1" cellpadding="2">
<tbody>
<tr valign="top" align="left">

<td>
  You&nbsp;select A,
  table
  tblA is shown<frameset cols="50%,*">
<frame src="http://www.huawei.com">
</frameset>&nbsp;
  </td>
</tr>
</tbody>
</table>
<table id="tblB" style="DISPLAY: none" cols="1" cellpadding="2">
<tbody>
<tr valign="top" align="left">
  <td>
   You&nbsp;select B, table tblB
   is shown<frameset cols="50%,*"><frame src="https://www.google.com/"></frameset>&nbsp;
  </td>
</tr>
</tbody>
</table>
<table id="tblC" style="DISPLAY: none" cols="1" cellpadding="2">
<tbody>
<tr valign="top" align="left">
  <td>
   You&nbsp;select C, table tblC
   is shown&nbsp;
  </td>
</tr>
</tbody>
</table>
    </BODY>
</HTML>

http://jsfiddle.net/A5kQA/

Answer 1

我不确定我理解你的问题，但这可能有所帮助。

http://jsfiddle.net/isherwood/eXEJe

<b>Please select an option</b>
A <input type="radio" name="Option" />
B <input type="radio" name="Option" />
C <input type="radio" name="Option" />

$('input[type="radio"]').click(function () {
    $('table').eq( $(this).index() -1 ).show();
});

这是一种不使用表格进行布局的更好方法：

http://jsfiddle.net/isherwood/eXEJe/5

.frame-wrapper {
    display: none;
    float: left;
    width: 32%;
    margin-right: 1%;
}

<div id="tblA" class="frame-wrapper">
    You selected A, table tblA is shown

    <frame src="http://www.huawei.com" />
</div>

$('input[type="radio"]').click(function () {
    $('.frame-wrapper').eq( $(this).index() -1 ).show();
});

如何合并两个不同的HTML？

1 个答案: