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

Question

I have 4 squares (divs) And 1 large div where I want the content to be loaded in according to which div is clicked 我有4个平方（div）和1个大div，我要根据单击哪个div来加载内容

Kind of like 'the technology' section of http://www.w3.org/html/logo/ 有点像http://www.w3.org/html/logo/的 “技术”部分

How can I do that using javascript/jquery? 如何使用javascript / jquery做到这一点？

First I have to say that I'm really new to jQuery. 首先，我必须说我真的是jQuery新手。

EDIT: this is the fixed version for future reference 编辑： 这是固定版本，以供将来参考

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
.square{
    width: 100px;
    height: 100px;
    float: left;
    background: #CCC;
}

#details{
    width: 400px;
    height: 100px;
    float: left;
    background: #999;
}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $('.square:first').css('background-color', 'red');

    $(".square").on("click", function() {
        $('.square').css('background-color', ' #ccc');
        $(this).css('background-color','red');
        var id= 'Content for div ' + $(this).attr("contentId");
        $('#details').fadeOut(function(){
            $(this).text(id).fadeIn();
        })
    });
});
</script>

</head>

<body>

    <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>     

</body>

</html>

Demo 演示

Answer 1

    <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>

Answer 2

Here's a simple example. 这是一个简单的例子。 HTML: 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>

And then using jQuery: 然后使用jQuery：

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

Or you could be a bit more adventurous and do it by decorating your divs with an attribute describing where they should be duplicated to on click. 或者，您可能会更加冒险，并通过在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>

Then...(no jQuery here but it needs querySelectorAll, you could do it with a simple loop or class name as well): 然后...（这里没有jQuery，但需要querySelectorAll，也可以使用简单的循环或类名来实现）：

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; };
}

(Hurrah for over-engineering.) （Hurrah过度设计。）

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2013-10-21 18:19:17

解决方案2
0 2013-10-21 18:17:52

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2013-10-21 18:19:17

解决方案2 0 2013-10-21 18:17:52

解决方案1
1 已采纳 2013-10-21 18:19:17

解决方案2
0 2013-10-21 18:17:52