Question

我想做一个网页，当我按下一个按钮时，它会删除div中的任何内容，它会将iframe作为html代码添加到div中

<iframe id="a" 

src="link1" width="640" height="360" 

frameborder="0" scrolling="no" allowfullscreen="" webkitallowfullscreen="" 

mozallowfullscreen="" oallowfullscreen="" msallowfullscreen=""></iframe>

当我按下另一个按钮时，它将从div中删除代码，它将添加另一个代码，如下所示

<embed id="b" src="link2" type="application/x-mplayer2" 

width="200" height="70" autostart="1" align="center" border="0" transparentatstart="0" 

animationatstart="1" showcontrols="true" showaudiocontrols="1" showpositioncontrols="0" 

showtracker="0" autosize="0" showstatusbar="1" displaysize="false">

还有主页作为示例

<div id="content"></div>
<input type="button" value="Value1">
<input type="button" value="Value2">

Answer 1

为简单起见，请在按钮中添加一些id：

<div id="content"></div>
<input id="button1" type="button" value="Value1">
<input id="button2" type="button" value="Value2">

为每个按钮添加click个处理程序：

//when `button1` is clicked
$('#button1').click( function() { 

  //remove the contents of the #content div
  $('#content').contents().remove();

  //use append to insert content into the #content div
  $('#content').append('<iframe id="a" src="link1" width="640" height="360" frameborder="0" scrolling="no" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" oallowfullscreen="" msallowfullscreen=""></iframe>');

});

//when 'button2' is clicked
$('#button2').click( function() { 

  //remove the contents of the #content div
  $('#content').contents().remove();

  //add the other content that you specified to the #content div
  $('#content').append('<embed id="b" src="link2" type="application/x-mplayer2" width="200" height="70" autostart="1" align="center" border="0" transparentatstart="0" animationatstart="1" showcontrols="true" showaudiocontrols="1" showpositioncontrols="0" showtracker="0" autosize="0" showstatusbar="1" displaysize="false">');

});

通过jquery在单击按钮上添加/删除内容

1 个答案: