列表式新闻——点击标题展开或收起内容


今天介绍一个网页中常见的布局运用,如上图。当进入页面时,我们看到的都是标题,当鼠标点击标题时,便会在对应下方展开其具体内容;而当再次点击标题或点击另一标题时,之前展开的内容便会收起。不多说,先贴上示例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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也是一看就懂,使用起来相当方便。新手可以直接将这段源码拷去,根据自己需要调整下样式即好。

Need a translation service?

Please enter your personal details and we will contact you shortly

Words translated by CCJK

146,096,379

Our Client Satisfaction

Rating for previous quarterr

4.00

Over 95% of our clients recommend our language services to others

Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP