打开隐藏content
<style type="text/css"> body
{
/**//*
You can remove these four options 
*/ background-image:url('http://www.dhtmlgoodies.com/images/heading3.gif'); background-repeat:no-repeat; padding-top:85px; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; margin:10px; padding-left:0px; text-align:left;
} /**//* Layout properties for your question */ .question{ font-weight:bold; /**//* Bold font */ color: #FF0000; /**//* The questions is in red */ cursor:pointer; /**//* Cursor is like a hand when someone rolls the mouse over the question */ } .answer{ /**//* Layout properties - You can change these */ border: 1px solid #555555; padding:3px; width:500px; background-color:#E2EBED; /**//* This one should not be changed */ display:none; } </style> <script type="text/javascript"> /**//* (C) www.dhtmlgoodies.com, September 2005 This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website. Terms of use: You are free to use this script as long as the copyright message is kept intact. However, you may not redistribute, sell or repost it without our permission. Thank you! www.dhtmlgoodies.com Alf Magne Kalleland */ function showHideAnswer() { var numericID = this.id.replace(/[^\d]/g,''); var obj = document.getElementById('a' + numericID); if(obj.style.display=='block'){ obj.style.display='none'; }else{ obj.style.display='block'; } } function initShowHideContent() { var divs = document.getElementsByTagName('DIV'); for(var no=0;no<divs.length;no++){ if(divs[no].className=='question'){ divs[no].onclick = showHideAnswer; } } } window.onload = initShowHideContent; </script><div id="q1" class="question">- How does this work ?</div><div id="a1" class="answer">This is done by use of <divs> and altering the css attribute "display"</div><div id="q2" class="question">- Where can I find this script?</div><div id="a2" class="answer">You can find this and alot of other scripts at www.dhtmlgoodies.com.</div><div id="q3" class="question">- Is it easy to implement?</div><div id="a3" class="answer">Yes it is, the only thing you have to do is to put some lines of CSS and Javascript into your <HEAD> section. Then, you define your questions and answers easily like this:<br><div id="q2" class="question">What's your name?</div><br><div id="a2" class="answer">My name is John Doe.</div>
