html 里面实现层次变换的效果（高手进）

我在网上找了好久，但是只找到下面的这种：
<style type="text/css">
.BoxLott {float:left; width:15px; height:15px; border:1px solid #999999; font-weight:bold; background-color:#FCFCFC; text-align:center; padding:3px; margin:3px 0px 0px 8px;}
.BoxLottClick {float:left; width:15px; height:15px; border:1px solid #999999; font-weight:bold; background-color:#FF0000; text-align:center; padding:3px; margin:3px 0px 0px 8px;}
</style>
<div class="BoxLott" onclick="this.className = this.className=='BoxLott'?'BoxLottClick':'BoxLott'">01</div>

以上代码实现的效果是本省存在一个层”层1“ 鼠标点击这个层以后，变化为另外的一个层”层2“。
我要实现类似的效果，但是并不是向上面那样
我要在那个”层1“下面添加另外两个层，”层3， 层4“，其中点击”层3“时，上面变为”层1“，点击”层4“时，上面变为”层2“

不是这段代码实现的！你贴出来的只是样式表和层定义！

这个应该是由JS代码控制的！