切换Div onclick的内容

时间:2013-12-26 15:18:55

标签: javascript html css

我有两个div - 每个都有一个图像。如果我点击第二个div内的图像,我希望这个图像成为第一个div的内容(如图库)。

重要的是我不替换img标签内的链接,因此不可能使用document.IMG1name.src = document.IMG2name.src。

我用innerhtml尝试过,但它不起作用:

<div id="container1">
<img src="blablabla">
</div>

<div id="container2"; onclick="document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="../funnycat.jpg">
</div>

3 个答案:

答案 0 :(得分:0)

HTML

<div class="pricing_table" id="monthly">
<ul>
<li>Basic</li>
<li><a href="" class="buy_now">Subscribe Now</a></li>
</ul>
   <ul style="background-color:#CCCCCC;">
   <h2>Monthly Plans</h2><a class='plansSwitch' href='#yearly'>Click here to switch to the  "Yearly Plans"</a></ul>
  </div>
  <div class="pricing_table" id="yearly">
  <ul>
 <li>Basic</li>
 <li><a href="" class="buy_now">Subscribe Now</a></li>
 </ul>
 <ul style="background-color:#CCCCCC;">
 <h2>Yearly Plans</h2><a class='plansSwitch' href='#monthly'>Click here to switch to the       "Monthly Plans"</a></ul>
</div>

JS

var $plansHolders = $('#monthly, #yearly').hide();
$('#monthly').show();
$('.plansSwitch').click(function() {
var href = $(this).attr('href');
$plansHolders.hide();
$(href).show();
});

答案 1 :(得分:0)

您只需在javascript:行动中添加onclick,就像这样

<div id="container1"></div>

<div id="container2" onclick="javascript:document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="http://i.imgur.com/0fS8dCsb.jpg"/>
</div>

example

答案 2 :(得分:0)

mm ...你的代码工作正常,只需关闭img标签并删除分号:

<div id="container1">
    <img src="blablabla" />
</div>

<div id="container2" onclick="document.getElementById('container1').innerHTML=document.getElementById('container2').innerHTML"><img src="https://www.google.es/logos/doodles/2013/holiday-series-2013-3-4504416610680832-hp.jpg" />
</div>

这里有一个演示:http://jsfiddle.net/HLs86/