Javascript 单击4个小div中的1个时更改div的内容

我有4个正方形（div） 和1个大div，我希望根据单击的div加载内容

有点像电影的“技术”部分

如何使用javascript/jquery实现这一点

首先，我必须说，我对jQuery非常陌生

编辑：这是供将来参考的固定版本

.广场{
宽度：100px；
高度：100px；
浮动：左；
背景：#CCC；
}
#细节{
宽度：400px；
高度：100px；
浮动：左；
背景：#999；
}
$（文档）.ready（函数（）{
$（'.square:first'）.css（'background-color'，'red'）；
$（“.square”）。在（“单击”，函数（）{
$（'.square'）.css（'background-color'，'#ccc'）；
$（this.css（'background-color'，'red'）；
var id='Content for div'+$（this.attr（“contentId”）；
$（“#详细信息”）.fadeOut（函数（）{
$（this.text（id）.fadeIn（）；
})
});
});
第一组的内容
第2分部的内容
第3分部的内容
第4分部的内容

---

这里有一个简单的例子。HTML:

<div id='target'>Click something below.</div>
<div class='x'>Badda</div>
<div class='x'>Bing</div>
<div class='x'>Badda</div>
<div class='x'>Boom</div>

或者你可以更大胆一点，用一个属性来装饰你的div，描述它们应该在点击时复制到哪里

<div id='target'>Click something below.</div>
<div dup_to='target'>Badda</div>
<div dup_to='target'>Bing</div>
<div dup_to='target'>Badda</div>
<div dup_to='target'>Boom</div>

单击下面的内容。
巴达
宾
巴达
繁荣

然后…（这里没有jQuery，但它需要querySelectorAll，您也可以使用一个简单的循环或类名）：

elems=document.querySelectorAll（“[dup_to]”）；
对于（i=0；i

（为过度工程欢呼。）

第一组的内容
第2分部的内容
第3分部的内容
第4分部的内容
$（“.square”）。在（“单击”，函数（）{
var id=$（this.attr（“contentId”）；
$（“#详细信息”）.html（$（“#”+id.html（））；
});

这可以通过jQuery完成，而不是大量的代码。但至少发布您的HTML，以及您将从何处为家长获取新内容。否则我们就无能为力了好吧，你仍然可以在这里发布你的HTML，让每个人都明白，这已经很有帮助了：）关于jQuery，我唯一不知道的是如何将一个未显示的div或其他东西加载到details div.din不获取u。。你能更具体一点吗？有没有可能在非显示的div中准备好4种不同的内容，我可以将它们加载到details div中？检查你的控制台，告诉我有错误。检查jquery源路径，并彻底解决所有问题。由于我不熟悉jQuery，我忘记了$（document）.ready（function（）{在我的代码开头，我同意避免使用jQuery并使用纯javascript。queryselector支持几乎所有的jQuery选择器。：）

$('.x').click(function() { $('#target').html($(this).html()); });

<div id='target'>Click something below.</div>
<div dup_to='target'>Badda</div>
<div dup_to='target'>Bing</div>
<div dup_to='target'>Badda</div>
<div dup_to='target'>Boom</div>

elems = document.querySelectorAll('[dup_to]');

for (i = 0; i < elems.length; ++i) 
{
  elems[i].onclick = dup_content_to(elems[i].getAttribute('dup_to'));   
}

function dup_content_to(target)
{
    return function() { document.getElementById(target).innerHTML = this.innerHTML; };
}

    <div class="square" contentId="c1"></div>
    <div class="square" contentId="c2"></div>
    <div class="square" contentId="c3"></div>
    <div class="square" contentId="c4"></div>

    <div id="details"></div>


<div style="display: none" id="c1"> Content for div 1</div>
<div style="display: none" id="c2"> Content for div 2</div>
<div style="display: none" id="c3"> Content for div 3</div>
<div style="display: none" id="c4"> Content for div 4</div>

    <script type="text/javascript">

    $(".square").on("click", function() { 
var id= $(this).attr("contentId");
     $("#details").html($("#" + id).html());
    });

    </script>