如何在主页的导航栏中完成"单击加号"使之变为减号的操作

问： 如何在主页的导航栏中完成"单击加号"使之变为减号的操作。

答：为了保证我的答案 100% 正确，我特地就这一问题向 Ying Chin——开发这部分代码的开发人员进行了咨询——她为我们解释了具体过程。下面就是她的介绍： 

“单击改变显示 (click-change-show)” 是基于 Dynamic HTML 的对象事件模型的，它要求浏览器支持 DHTML 以及脚本程序。在主页中，我们利用外部 <DIV> 标签来表示链接部分是隐藏还是显示，然后将事件 onClick 附在 <DIV> 标签上。在 <DIV> 内部，还包括一个 <IMG> 标签，其 SRC 属性可指向“+”或“-”图片文件，而其他 <DIV> 标签，其 STYLE/DISPLAY 属性则控制链接是显示还是隐藏。这两种标签拥有相互关联的 ID，因此 onClick 事件函数能够检索和改变其当前状态。

下面为代码示例：

<DIV STYLE="cursor:hand;" onClick=clickCategory("PRODUCT")>
<IMG ID="I_PRODUCT" SRC="/library/homepage/images/plus.gif" ALT="*" onClick=clickCategory("PRODUCT")>
<A STYLE="color:black;text-decoration:none" HREF="" onclick="window.event.returnValue = false;"> <B>Product Families</B></A>
<DIV STYLE="display:block;" ID="T_PRODUCT" onclick="window.event.cancelBubble=true;;" >
...
...
</DIV>
</DIV>

function clickCategory(CatIDStr)
{
var txtObj = document.all("T_" + CatIDStr);
var imgObj = document.all("I_" + CatIDStr);
if (txtObj.style.display == 'none')
{
txtObj.style.display = '';
imgObj.src = '/library/homepage/images/minus.gif';
}
else
{
txtObj.style.display = 'none';
imgObj.src = '/library/homepage/images/plus.gif';
}
window.event.cancelBubble=true;
}


如果用户单击 <DIV> 部分，则调用 clickCategory() 事件函数。该事件函数将检查内部 <DIV> 标签的 DISPLAY 状态，以查看其目前的状态到底为显示还是隐藏。如果当前为显示状态，就将 DISPLAY 的状态改为隐藏，然后将图片切换为“+”号。同理，如果内部 <DIV> 标签的 DISPLAY 的状态为隐藏，我们就将之改变为显示，然后将图片切换到“-”号。

对于不能支持 DHTML 和脚本程序的浏览器，仅显示其展开状态的完整列表。 

From: http://www.microsoft.com/china/backstage/archives/oct99_archive.htm