使用jquery roundabout一次更改两个div内容的最佳方法是什么?

我正在使用jquery roundabout在我的网站上构建一个动画徽标-我希望在单击每个项目时更改内容,如下所示:

http://fredhq.com/projects/roundabout/demo/images/

我已经在那个页面上实现了JS,它工作得很好,但是我想知道什么是最好的方法来在侧面进行另一个DIV更改?我遇到的问题是,脚本在数组中使用字符串值,而我可能希望创建不同的隐藏div,并根据单击的元素显示/隐藏。

简单示例:

<img id="blue" src="triangle_blue.png">
<img id="aqua" src="triangle_aqua.png">

<span id="item-title"></span>

<div id="bluepanel">
  Content here
</div>
<div id="aquapanel">
  Content here
</div>

这是JS:

$(document).ready(function(){

 var titles = {
  blue: 'Superior Service',
  aqua: 'Bill Checking & Validation'
 };

 $('img').focus(function()
 {
  var useText = (typeof titles[$(this).attr('id')] != 'undefined') ? titles[$(this).attr('id')] : '';
  $('#item-title').html(useText).fadeIn(200);
  }).blur(function() {
  $('#item-title').fadeOut(100);
 });

因此,您可以看到atm脚本根据标题数组的键更改了项目标题的内容,我还想做的是在aqua处于焦点时显示aquapanel,并明显隐藏所有其他元素(实际示例中有1个以上)。

我的javascript知识只会带我到:

$('#aqua').focus(function(){
 $('#bluepanel').hide();
 $('#aquapanel').show();  
});

我意识到这是难以置信的不雅和低效,考虑到有8个或元素在名单上。那么,有没有一种方法可以创建一个DIV ID数组,并显示所选的一个,同时隐藏该数组中的所有其他对象?

我希望我说的清楚,任何帮助都非常感谢。