图文混排的网页选项卡

HTML

<!--主要结构-->
<div id="gallery">
    <div class="on" title="news"><span>新闻</span></div>
    <div class="off" title="entertainment"><span>娱乐</span></div>
    <div class="off" title="travel"><span>旅游</span></div>
    <div class="off" title="city"><span>城市</span></div>
    <div class="off" title="life"><span>生活</span></div>
</div>
<div id="news" class="show"> </div>
<div id="entertainment" class="hide"> </div>
<div id="travel" class="hide"> </div>
<div id="city" class="hide"> </div>
<div id="life" class="hide"> </div>
					    

CSS

.clear { clear: both; }
#gallery {
    font: 11px verdana, arial, sans-serif;/*设置字体大小及字体类型*/
    width: 750px;
    padding: 15px 0 0 0;
    line-height: 15px;/*设置行高*/
}
#gallery .on {/*当前选项卡的样式表*/
    color: #c00;
    padding: 0 20px;
    margin-right: 2px;
    margin-top: 1px;
    float: left;
    background: url(tabs_2.gif) repeat-x left bottom;/*当前选项卡的背景图*/
    border: 1px solid #000;/*设置边框*/
    border-bottom: 0;/*不显示底部边框*/
    cursor: pointer;/*手势*/
    height: 33px;
    line-height: 32px;
    position: relative;
    z-index: 100;/*叠放次序*/
}
#gallery .off {/*非当前选项卡的样式表*/
    color: #000;
    height: 33px;
    margin-right: 2px;
    line-height: 33px;
    padding: 0 20px;
    float: left;
    background: url(tabs_0.gif) repeat-x left bottom;/*非当前选项卡的背景图*/
    border: 1px solid #ddd;
    border-bottom-color: #000;
    cursor: pointer;
    position: relative;
    z-index: 20;
}
.show {/*显示详情的样式表*/
    clear: left;
    background: #fff;
    width: 708px;
    margin-top: 0;
    top: -1px;
    border: 1px solid #000;
    padding: 20px;
    position: relative;
    z-index: 50;
    font: 11px verdana, arial, sans-serif;
    line-height: 18px;
}
.show img {/*图文混排中图片的样式*/
    float: left;
    margin: 0 10px 10px 0;
}
.hide {/*不显示详情的样式表*/
    display: none;
    width: 0;
    overflow: hidden;
}

					    

JS

onload = function() {
	var e, i = 0;
	while (e = document.getElementById('gallery').getElementsByTagName ('DIV') [i++]) {
		if (e.className == 'on' || e.className == 'off') {
		e.onclick = function () {
			var getEls = document.getElementsByTagName('DIV');
				for (var z=0; z<getEls.length; z++) {
				getEls[z].className=getEls[z].className.replace('show', 'hide');
				getEls[z].className=getEls[z].className.replace('on', 'off');
				}
			this.className = 'on';
			var target = this.getAttribute('title');
			document.getElementById(target).className = "show";
			}
		}
	}
}