javascript - Which div is currently active?

Question

I have a series of divs ( displaying graphics). Click one graphic div and something is written in a div.

$("#graphic1").click(function(){  
   $("#text").html("Something important goes here.") 
}

But if the user clicks graphic1 when graphic8 is displayed I want it to do something else

if (graphic8 was active before graphic1 was clicked){
   do this
} else {
   do that
}

To explain further

1. there are many divs.
2. any one of these divs may be active at one time.
3. when selecting a new div I would like to know which div was active BEFORE the new div was selected.

EDIT 9/14 in response to answers

Here's a quick example at jsfiddle: http://jsfiddle.net/MAYO/2DEnY/2/

I would like that for the divs to 1. toggle 2. when selecting a new div that the description is displayed below. I tried and failed doing combinations of if/else clauses. 3. After this little bit is done (and I think solving this would solve the next) I would like it that the text description be able to be different depending upon which div was previously active.

Answer 1

将一个类添加到已单击的任何项目，并为每次新单击选择该类，从该元素中读取您想要的任何内容，删除该类，然后将其再次添加到新项目。

做了一个小提琴来演示：

http://jsfiddle.net/dPwkE/

jQuery：

 $(function(){
    $('a').click(function(){
        if($('a.active')[0]){
           $('a.active').removeClass("active");
           $(this).addClass("active");
        }else{
            $(this).addClass("active");
        }
    });
});

在阅读编辑之后，据我所知，您可以使用数据属性为每个 div 存储一些内容，然后在按下后显示它。

这可能是什么意思？ http://jsfiddle.net/2DEnY/4/

Answer 2

假设你的 html 结构看起来像

<div id="graphic1" class="graphic">
</div>
<div id="graphic2" class="graphic">
</div>
<div id="graphic3" class="graphic">
</div>
...

你的 js 代码就像

$(".graphic").click(function(){  
   var $before = $(".graphic.active"); //previously active div, do what ever you want,
                                       //remember to check whether $before is null or equals to 
                                       //$(this)
   $before.removeClass("active");
   $(this).addClass("active");

   $("#text").html("Something important goes here.") 
});