Blog

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

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

Words translated by CCJK

146,096,379

Request a call or contact us

  •  

    Call ccjk.support for professional assistance

  •  

    Click Here to leave us a message and be as detailed as possible.

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00
  •  
    Inquiry Form

    Please take few minutes to fill
    inquiry form and get Free Quote

  •  
    Request a Call

    Click to receive Free Call, Our
    Representative will contact you

  •  
    Leave a Message

    Please leave us a message and
    be as detailed as possible

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


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