CnBlogs.Com用到的CSS控制的代码折叠功能测试

最新推荐文章于 2023-04-19 21:02:19 发布

weixin_30776863

最新推荐文章于 2023-04-19 21:02:19 发布

阅读量71

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Dicky/archive/2005/10/26/262324.html

本文展示了CnBlogs网站中使用的CSS控制代码折叠功能的实现方式，通过HTML、CSS和JavaScript代码详细介绍了如何创建可折叠的代码块，特别关注了代码高亮和折叠效果的实现。

代码如下:
<!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" lang="zh-CN"> <head> <title> CnBlogs.Com用到的CSS控制的代码折叠功能测试 </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="Generator" content="EditPlus" /> <meta name="Author" content="" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> </head> <body> 跟帖关闭调用页面close.htm代码如下： <div style="border-right: #cccccc 1px solid; padding-right: 5px; border-top: #cccccc 1px solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left: #cccccc 1px solid; width: 98%; word-break: break-all; padding-top: 4px; border-bottom: #cccccc 1px solid; background-color: #eeeeee"> <img src="https://images.cnblogs.com/outliningindicators/none.gif" align="top"><html> <img src="https://images.cnblogs.com/outliningindicators/none.gif" align="top">    <head> <img src="https://images.cnblogs.com/outliningindicators/none.gif" align="top">        <meta http-equiv="content-type" content="text/html; charset=gb2312"> <img src="https://images.cnblogs.com/outliningindicators/none.gif" align="top">    </head> <img src="https://images.cnblogs.com/outliningindicators/none.gif" align="top"> <img src="https://images.cnblogs.com/outliningindicators/none.gif" align="top">    <body> <img id="codehighlighter1_136_591_open_image" style="display: inline" onclick="this.style.display='none'; codehighlighter1_136_591_open_text.style.display='none'; codehighlighter1_136_591_closed_image.style.display='inline'; codehighlighter1_136_591_closed_text.style.display='inline';" src="https://images.cnblogs.com/outliningindicators/expandedblockstart.gif" align="top"><img id="codehighlighter1_136_591_closed_image" style="display: none" onclick="this.style.display='none'; codehighlighter1_136_591_closed_text.style.display='none'; codehighlighter1_136_591_open_image.style.display='inline'; codehighlighter1_136_591_open_text.style.display='inline';" src="https://images.cnblogs.com/outliningindicators/contractedblock.gif" align="top">        <script language="javascript"><span id="codehighlighter1_136_591_closed_text" style="border-right: #808080 1px solid; border-top: #808080 1px solid; display: none; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff"><img src="https://images.cnblogs.com/dot.gif"> <img src="https://images.cnblogs.com/outliningindicators/inblock.gif" align="top">            //控制列表关闭的代码 <img src="https://images.cnblogs.com/outliningindicators/inblock.gif" align="top">            var parentfollow=parent.document.getelementbyid("follow356") <img src="https://images.cnblogs.com/outliningindicators/inblock.gif" align="top">            var parentfollowtd=parent.document.getelementbyid("followtd356") <img src="https://images.cnblogs.com/outliningindicators/inblock.gif" align="top">            var parentfollowimg=parent.document.getelementbyid("followimg356") <img src="https://images.cnblogs.com/outliningindicators/inblock.gif" align="top">            if(parentfollow) <img id="codehighlighter1_377_422_open_image" onclick="this.style.display='none'; codehighlighter1_377_422_open_text.style.display='none'; codehighlighter1_377_422_closed_image.style.display='inline'; codehighlighter1_377_422_closed_text.style.display='inline';" src="https://images.cnblogs.com/outliningindicators/expandedsubblockstart.gif" align="top"><img id="codehighlighter1_377_422_closed_image" style="display: none" onclick="this.style.display='none'; codehighlighter1_377_422_closed_text.style.display='none'; codehighlighter1_377_422_open_image.style.display='inline'; codehighlighter1_377_422_open_text.style.display='inline';" src="https://images.cnblogs.com/outliningindicators/contractedsubblock.gif" align="top">            <span id="codehighlighter1_377_422_closed_text" style="border-right: #808080 1px solid; border-top: #808080 1px solid; display: none; border-left: #808080 1px solid; border-bottom: #808080 1px solid; background-color: #ffffff"><img src="https://images.cnblogs.com/dot.gif">{ <img src="https://images.cnblogs.com/outliningindicators/inblock.gif" align="top">                parentfollow.style.display="none";     <img src="https://images.cnblogs.com/outliningindicators/expandedsubblockend.gif" align="top">            } <img src="https://images.cnblogs.com/outliningindicators/inblock.gif" align="top">            parentfollowtd.style.display="none"; <img src="https://images.cnblogs.com/outliningindicators/inblock.gif" align="top">            parentfollowimg.innerhtml='<a href="open.htm" target="hiddenframe"  title="展开帖子列表" ><img src="plus.gif" border="0" ></a>'; <img src="https://images.cnblogs.com/outliningindicators/expandedblockend.gif" align="top">        </script> <img src="https://images.cnblogs.com/outliningindicators/none.gif" align="top">    </body> <img src="https://images.cnblogs.com/outliningindicators/none.gif" align="top"></html> </div> </body> </html>
[Ctrl+A 全选提示:你可先修改部分代码,再点运行代码]

转载于:https://www.cnblogs.com/Dicky/archive/2005/10/26/262324.html