草窟设计

JQUERY 层-隐藏-显示效果
可以应用与文章列表摘要模式-列表模式切换：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN"> <head> <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Simple JQuery Collapsing menu</title> </head> <body> <script type="text/javascript"> $(function() { var i = 1; $("#mostrar").click(function(event) { if(i%2 == 1) $("#mostrar").html("简洁模式"); else $("#mostrar").html("摘要模式"); event.preventDefault(); $(".box2").slideToggle(); i++; }); }); </script> <style type="text/css"> #mostrar{ display:block; width:70%; padding:5px; border:2px solid #D0E8F4; background-color:#ECF8FD; } h2 { font-size:14px;} .itembox { border:#99CCCC solid 1px; margin-bottom:10px; padding:10px;} </style> <a href="#" id="mostrar">摘要模式</a> <div id="content" style="width:70%"> <div class="news-list"> <div class="itembox itembox2"> <div class="box1"> <h2><a href="#" target="_blank">站长要想摆脱搜索塑造网络品牌是前提</a></h2></div> <div class="box2">我相信来Admin5.com逛的站长们的流量大多都是靠搜索来的，在国内如果谈搜索百度是不能不谈的，谁让他是中国的老大呢，但是随着百度算法的一再的调整，靠搜索靠百度为生也越来越难，当然也不排除那些网站优化中的大侠们，比较百度的首页的位置是有限的，高手也是少之.... [<a href="/article/20090809/171937.shtml" target="_blank">阅读全文</a>] <div class="box3">分类：<span class="catspan"><a href="#">美国生活</a></span>作者：<span class="boxspan">YAO YINGYING</span>点击：<span class="boxspan">47082</span>评论：<span class="boxspan">319</span></div> </div> </div> <div class="itembox"> <div class="box1"> <h2><a href="#" target="_blank">站长请不要忽视了你的网站LOGO</a></h2></div> <div class="box2">通常，我们观察一个人，首先看到的是他的相貌，其次是身材、衣着(色狼尤是如此)。我们有可能一个星期都不洗澡，但每天都要洗脸，男生要刮胡子，女生要化妆，目的只有一个，要把最漂亮的一面展示给别人我要问问同在.... [<a href="#" target="_blank">阅读全文</a>] <div class="box3">分类：<span class="catspan"><a href="#">美国生活</a></span>作者：<span class="boxspan">YAO YINGYING</span>点击：<span class="boxspan">47082</span>评论：<span class="boxspan">319</span></div> </div> </div> <div class="itembox itembox2"> <div class="box1"> <h2><a href="#" target="_blank">新站长开站要谨记的三条真理</a></h2></div> <div style="display: block;" class="box2">一：坚持才能胜利可能大家都跟我开始的时候一样，满怀信心的建了一个站，但是过了没几天觉得很灰心。为什么呢？因为没人来“欣赏”它嘛！就会开始怀疑？怀疑哪些呢？怀疑是不是自己的站不好看？用的网站程序不对？是.... [<a href="#" target="_blank">阅读全文</a>] <div class="box3">分类：<span class="catspan"><a href="#">美国生活</a></span>作者：<span class="boxspan">YAO YINGYING</span>点击：<span class="boxspan">47082</span>评论：<span class="boxspan">319</span></div> </div> </div> <div class="itembox"> <div class="box1"> <h2><a href="#" target="_blank">“QQ之父”马化腾自述：创业靠自己</a></h2></div> <div class="box2">去年是改革开放30周年，今年是新中国成立60周年，腾讯也迎来自己的第一个十年，中国从大国走向强国，互联网蓬勃生长，腾讯的发展离不开这样的大背景。 1984年，我是上初二时来到深圳的，那时候深圳刚刚开放，这么多年.... [<a href="/article/20090807/171530.shtml" target="_blank">阅读全文</a>] <div class="box3">分类：<span class="catspan"><a href="#">美国生活</a></span>作者：<span class="boxspan">YAO YINGYING</span>点击：<span class="boxspan">47082</span>评论：<span class="boxspan">319</span></div> </div> </div> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。