默认隐藏内容,点击标题显示内容。

本文介绍了一个简单的FAQ页面实现方法,通过JavaScript控制常见问题及其答案的显示与隐藏,提供良好的用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>runcode</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<metaname="Author"content="Sheneyan"/>
<scripttype="text/javascript">
varlastFaqClick=null;//上次点击的faq
window.onload=function(){
varfaq=document.getElementById("faq");
vardls=faq.getElementsByTagName("dl");
for(vari=0,dl;dl=dls[i];i++){
vardt=dl.getElementsByTagName("dt")[0];//取得标题
dt.id="faq_dt_"+(Math.random()*100);
dt.onclick=function(){
varp=this.parentNode;//取得父节点
if(lastFaqClick!=null&&lastFaqClick.id!=this.id){
vardds=lastFaqClick.parentNode.getElementsByTagName("dd");
for(vari=0,dd;dd=dds[i];i++)
dd.style.display='none';
}
lastFaqClick=this;
vardds=p.getElementsByTagName("dd");//取得该父节点所有的子节点,也就是所有的答案
vartmpDisplay='none';
if(gs(dds[0],'display')=='none')
tmpDisplay='block';
for(vari=0;i<dds.length;i++)
dds[i].style.display=tmpDisplay;
}
}
}

/**
*取得元素的真实css属性
*writtenin06.7sheneyan
*/
functiongs(d,a){
if(d.currentStyle){
varcurVal=d.currentStyle[a]
}else{
varcurVal=document.defaultView.getComputedStyle(d,null)[a]
}
returncurVal;
}
</script>
<styletype="text/css">
*,html,body{margin:0;padding:0}
#faqdt{font-weight:bold;cursor:pointer}
#faqdd{display:none;}
</style>
</head>
<body>
<ulid="faq">
<li>
<dl><dt>问题1</dt><dd>答:1</dd></dl>
</li>
<li>
<dl><dt>问题2</dt><dd>答:2</dd></dl>
</li>
<li>
<dl><dt>问题3</dt><dd>答:3</dd></dl>
</li>
<li>
<dl><dt>问题4</dt><dd>答:4</dd></dl>
</li>
</li>
</ul>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值