列表式新闻——点击标题展开或收起内容
今天介绍一个网页中常见的布局运用，如上图。当进入页面时，我们看到的都是标题，当鼠标点击标题时，便会在对应下方展开其具体内容；而当再次点击标题或点击另一标题时，之前展开的内容便会收起。不多说，先贴上示例代码：
<!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>ＣＣＪＫ可提供各项本地化专业服务</dt>
<dd>
<ul>
<li>经验丰富的专职译员，可胜任从法律文件到产品手册等众多领域的翻译</li>
<li>语言和工程团队共同携手，为您打造精确的本地化网站，以使其在目标地区发挥最大的成效</li>
<li>经验丰富的项目经理、语言专家和程序员齐心协力，随时准备让您的软件展现在全球任何新兴市场中</li>
<li>无论任何格式和语言，凭借ＣＣＪＫ在众多排版和图形软件方面丰富的 DTP 经验，定可让您享受轻松愉悦、价格实惠的桌面排版体验</li>
</ul>
</dd>
</dl>
</li>
<li>
<dl>
<dt>ＣＣＪＫ服务的主要行业</dt>
<dd>ＣＣＪＫ致力于为各行各业提供广泛的语言解决方案，行业包括：科技，制造，财经，医疗。</dd>
</dl>
</li>
<li>
<dl>
<dt>关于ＣＣＪＫ</dt>
<dd>
<ul>
<li>ＣＣＪＫ成立于 2000 年，自成立之日起，ＣＣＪＫ便专注从事文件翻译、本地化、DTP 桌面排版、网站建设及软件工程等业务，触角伸向欧美与全亚洲，为中国企业走向世界，为国外企业进入中国架起一道无障碍沟通的桥梁。</li>
<li>经过多年的成长与发展，ＣＣＪＫ公司已拥有非常完善、严格的翻译本地化作业处理体系和流程，可以实现绝大多数亚欧语种的成功互译，成为亚太地区本地化行业中的佼佼者，客户遍及世界各国，业务遍布各行各业，成功获得许多国际知名公司的高度信赖与长久合作。几年来，公司营业收入呈几何跳跃式发展，其中非中文业务占到公司营收的 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也是一看就懂，使用起来相当方便。新手可以直接将这段源码拷去，根据自己需要调整下样式即好。
Need a translation service?
Please enter your personal details and we will contact you shortly
Words translated by CCJK
146,096,379Over 95% of our clients recommend our language services to others
CHINESE
关于“帐户”与“账户”