今天介绍一个网页中常见的布局运用,如上图。当进入页面时,我们看到的都是标题,当鼠标点击标题时,便会在对应下方展开其具体内容;而当再次点击标题或点击另一标题时,之前展开的内容便会收起。不多说,先贴上示例代码:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”https://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>点击标题展开或收起内容的示例代码</title>

<style type=”text/css”><!–

* {margin:0; padding:0;}

#tabBox {width:300px; margin:0 auto; list-style:none;}

#tabBox dl {margin-top:10px; font-size:14px;}

#tabBox dd {display:none; font-size:12px;}

.tab {cursor:pointer; background:#ccc; height:44px; line-height:44px; padding:0 30px; color:#49015a;}

#tabBox dl:hover dt {background:#9960a6; color:#fff;}

.tabContent {border:1px solid #f1eff1; background:#f7f7f7 url(../images/tabBG.png) repeat-x bottom; padding:15px 25px; margin-top:3px;}

–></style>

</head>

<body>

<ul>

<li>

<dl>

<dt>CCJK可提供各项本地化专业服务</dt>

<dd>

<ul>

<li>经验丰富的专职译员,可胜任从法律文件到产品手册等众多领域的翻译</li>

<li>语言和工程团队共同携手,为您打造精确的本地化网站,以使其在目标地区发挥最大的成效</li>

<li>经验丰富的项目经理、语言专家和程序员齐心协力,随时准备让您的软件展现在全球任何新兴市场中</li>

<li>无论任何格式和语言,凭借CCJK在众多排版和图形软件方面丰富的 DTP 经验,定可让您享受轻松愉悦、价格实惠的桌面排版体验</li>

</ul>

</dd>

</dl>

</li>

<li>

<dl>

<dt>CCJK服务的主要行业</dt>

<dd>CCJK致力于为各行各业提供广泛的语言解决方案,行业包括:科技,制造,财经,医疗。</dd>

</dl>

</li>

<li>

<dl>

<dt>关于CCJK</dt>

<dd>

<ul>

<li>CCJK成立于 2000 年,自成立之日起,CCJK便专注从事文件翻译、本地化、DTP 桌面排版、网站建设及软件工程等业务,触角伸向欧美与全亚洲,为中国企业走向世界,为国外企业进入中国架起一道无障碍沟通的桥梁。</li>

<li>经过多年的成长与发展,CCJK公司已拥有非常完善、严格的翻译本地化作业处理体系和流程,可以实现绝大多数亚欧语种的成功互译,成为亚太地区本地化行业中的佼佼者,客户遍及世界各国,业务遍布各行各业,成功获得许多国际知名公司的高度信赖与长久合作。几年来,公司营业收入呈几何跳跃式发展,其中非中文业务占到公司营收的 60% 以上,国际客户占到 70% 以上!</li>

</ul>

</dd>

</dl>

</li>

</ul>

</body>

<script type=”text/javascript”>

var lasttabBoxClick=null;

window.onload=function(){

var tabBox=document.getElementById(“tabBox”);

var dls=tabBox.getElementsByTagName(“dl”);

for (var i=0,dl;dl=dls[i];i++){

var dt=dl.getElementsByTagName(“dt”)[0];

dt.id = “tabBox_dt_”+(Math.random()*100);

dt.onclick=function(){

var p=this.parentNode;

if (lasttabBoxClick!=null&&lasttabBoxClick.id!=this.id){

var dds=lasttabBoxClick.parentNode.getElementsByTagName(“dd”);

for (var i=0,dd;dd=dds[i];i++)

dd.style.display=’none’;

}

lasttabBoxClick=this;

var dds=p.getElementsByTagName(“dd”);

var tmpDisplay=’none’;

if (gs(dds[0],’display’)==’none’)

tmpDisplay=’block’;

for (var i=0;i<dds.length;i++)

dds[i].style.display=tmpDisplay;

}

}

}

function gs(d,a){

if (d.currentStyle){

var curVal=d.currentStyle[a]

}else{

var curVal=document.defaultView.getComputedStyle(d, null)[a]

}

return curVal;

}

</script>

</html>

用心的人会发现,其实这种效果是非常常见的,除了我说的列表式新闻外,还有更多可见于FAQ疑难解答类。在这段代码里,html标签和样式都很简单,js也是一看就懂,使用起来相当方便。新手可以直接将这段源码拷去,根据自己需要调整下样式即好。