Div+Css+JS做多個顯示/隱藏內容模塊

　　網(LieHuo.Net)教程 本文利用Div+Css+JS，做了多個顯示/隱藏內容模塊的功能。注：要引入jQuery包，我引入的是jquery-1.3.2.min.js，為了方便演示，不再將代碼單獨拿出來。

<title>Div+Css+JS做多個顯示/隱藏內容模塊-網</title><style>.mainbox h3{ margin-bottom:0px; line-height:32px;height:32px;padding-left:1em;font-size:13px;font-weight:700;border-bottom:1px solid #E6E7E1;border-top:4px solid #E8F0F7; border-left:1px solid #E8F0F7;border-right:1px solid #E8F0F7;}.mainbox{ width:880px;position:relative; margin-left:auto; margin-right:auto; margin-bottom:5px;}.headactions{position:absolute;top:12px; right:24px;line-height:1em;}.tablelist{ width: 880px; margin-left: auto; margin-right: auto; border:1px solid;}td{background:#e5f1f4;}</style><script type="text/javascript" src="http://www.jyygyx.com/uploads/userup/87/fangxl/jquery-1.3.2.min.js"></script><script type="text/javascript">//顯示或隱藏內容 function toggle_collapse(objname) { var obj = $("#" + objname); if (obj) { obj.slideToggle("2000"); } var img = $("#" + objname + '_img'); if (img) { if (img.attr("src") == "http://www.jyygyx.com/uploads/userup/87/fangxl/liehuo_collapse.gif") { img.attr("src", "http://www.jyygyx.com/uploads/userup/87/fangxl/liehuo_expand.gif"); img.attr("title", "expand"); } else { img.attr("src", "http://www.jyygyx.com/uploads/userup/87/fangxl/liehuo_collapse.gif"); img.attr("title", "collapse"); img.attr("title", "collapse"); } } }</script><div class="mainbox"><span class="headactions"><img id="category_CN_img" src="http://www.jyygyx.com/uploads/userup/87/fangxl/liehuo_expand.gif" _fcksavedurl="http://www.jyygyx.com/uploads/userup/87/fangxl/liehuo_expand.gif" alt="展開/收起" onclick="toggle_collapse('category_CN');"/></span><h3 onclick="toggle_collapse('category_CN');"><a href="HTTP://www.jyygyx.com" _fcksavedurl="HTTP://www.jyygyx.com" TARGET="_BLANK">網 LIEHUO.NET</a></h3><div id="category_CN" style=" display:none;"><table class="tablelist" align="center" cellpadding="0"><tr><td>Title：網 - 關注站長，建設互聯網！</td><td colspan="3"><te:TETextBox ID="txtCSTitle" runat="server" Width="380px" MaxLength="100"></te:TETextBox></td></tr><tr><td>Content：提供互聯網資訊與教程，是站長、程序員、網頁設計師交流的平臺，多年來一直堅持為互聯網的發展提供動力，熱情、積極、向上、不斷進取是Liehuo.Net的座右銘，關注站長，建設互聯網！</td><td colspan="3"><FCKeditorV2:FCKeditor ID="txtCSContent" runat="server" Height="350px" Width="98%"></FCKeditorV2:FCKeditor></td></tr></table></div></div><br /><center>網更多教程，請訪問：<a href=http://www.jyygyx.com/ target=_blank _fcksavedurl="http://www.jyygyx.com/ target=_blank">http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈