<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Heluyao&#039;s Blog &#187; javascript</title>
	<atom:link href="http://www.11gz.com/blog/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.11gz.com/blog</link>
	<description>设计、开发路上的点点滴滴...</description>
	<lastBuildDate>Tue, 20 Jul 2010 03:52:24 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		
<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type='text/javascript' src='http://www.11gz.com/blog/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>
<script type="text/javascript">
/* <![CDATA[ */
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->
	<item>
		<title>YUI Compressor online在线压缩js</title>
		<link>http://www.11gz.com/blog/2009/08/28/yui-compressor-online-js/</link>
		<comments>http://www.11gz.com/blog/2009/08/28/yui-compressor-online-js/#comments</comments>
		<pubDate>Fri, 28 Aug 2009 09:57:52 +0000</pubDate>
		<dc:creator>heluyao</dc:creator>
				<category><![CDATA[JS/Ajax/AS]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[优化]]></category>
		<category><![CDATA[压缩]]></category>

		<guid isPermaLink="false">http://www.11gz.com/blog/?p=437</guid>
		<description><![CDATA[分享一个利用YUI Compressor在线压缩js的网页。之前推荐过的TBCompressor其实就是这款压缩工具，只是TBueder将其封装了一下。该工具本地安装需要java的支持，有点麻烦，今天发现一个在线的，挺方... ]]></description>
			<content:encoded><![CDATA[<p>分享一个利用<a href="http://www.julienlecomte.net/yuicompressor/">YUI Compressor</a>在线压缩js的网页。</p>
<p><em><strong>链接地址：<a href="http://yui.2clics.net/" title="YUI Compressor online - http://yui.2clics.net/">YUI Compressor online</a></strong></em></p>
<p>之前推荐过的<a href="http://www.11gz.com/blog/?p=371">TBCompressor</a>其实就是这款压缩工具，只是TBueder将其封装了一下。该工具本地安装需要java的支持，有点麻烦，今天发现一个在线的，挺方便了！只是目前还不能压缩css，挺遗憾的~~！</p>

	<ul class="st-related-posts">
	<li><a href="http://www.11gz.com/blog/2009/02/16/js-css-compression-TBCompressor/" title="推荐一款js css压缩工具TBCompressor (2009年02月16日)">推荐一款js css压缩工具TBCompressor</a></li>
	<li><a href="http://www.11gz.com/blog/2008/12/15/retreat-separation-backward/" title="预留退路+分离javascript+向后兼容性 (2008年12月15日)">预留退路+分离javascript+向后兼容性</a></li>
	<li><a href="http://www.11gz.com/blog/2008/05/09/css-load-way-optimization/" title="页面中 CSS 加载方式的优化 (2008年05月9日)">页面中 CSS 加载方式的优化</a></li>
	<li><a href="http://www.11gz.com/blog/2008/04/17/two-month-javascript-learn/" title="近两个月加强javascript的学习 (2008年04月17日)">近两个月加强javascript的学习</a></li>
	<li><a href="http://www.11gz.com/blog/2009/01/09/simple-beautification-select/" title="简单解决“丑陋”的select下拉框 (2009年01月9日)">简单解决“丑陋”的select下拉框</a></li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://www.11gz.com/blog/2009/08/28/yui-compressor-online-js/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>简单解决“丑陋”的select下拉框</title>
		<link>http://www.11gz.com/blog/2009/01/09/simple-beautification-select/</link>
		<comments>http://www.11gz.com/blog/2009/01/09/simple-beautification-select/#comments</comments>
		<pubDate>Thu, 08 Jan 2009 16:46:51 +0000</pubDate>
		<dc:creator>heluyao</dc:creator>
				<category><![CDATA[JS/Ajax/AS]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[select]]></category>

		<guid isPermaLink="false">http://www.11gz.com/blog/?p=354</guid>
		<description><![CDATA[　　准备做为偶Blog的demo频道下的number one。代码就不在此处贴了，专门做了示范的页面。就请舞动你的鼠标，按得更深一点吧！

一个Page只有一个需要美化的Select：美化单个select下拉框
这个自... ]]></description>
			<content:encoded><![CDATA[<p>　　准备做为偶Blog的demo频道下的number one。代码就不在此处贴了，专门做了示范的页面。就请舞动你的鼠标，按得更深一点吧！</p>
<ul>
<li>一个Page只有一个需要美化的Select：<a href="/demo/js-ajax/select/select-1.html">美化单个select下拉框</a></li>
<li>这个自然就是多个咯：<a href="/demo/js-ajax/select/select-n.html">美化多个select下拉框</a></li>
</ul>
<p>　　有点仿<a href="http://www.tudou.com/">tudou.com</a>那个search select的原理，照着她的html结构写的代码，但是偶为了简便，value放在了input里，而土豆的是放进一个a标签的href属性里，说明她更充分的考虑了“<a href="http://www.11gz.com/blog/?p=261">预留退路</a>”问题，深情的赞美一下！</p>
<p>　　不多说了，偶要睡觉去袅，直接看代码，懒得做rar下载了，“另存为”一下，即OK!最后声明，用偶代码，很欢迎，转载偶的文章，别忘了留个链接哦！-_-!</p>

	<ul class="st-related-posts">
	<li><a href="http://www.11gz.com/blog/2008/12/15/retreat-separation-backward/" title="预留退路+分离javascript+向后兼容性 (2008年12月15日)">预留退路+分离javascript+向后兼容性</a></li>
	<li><a href="http://www.11gz.com/blog/2008/04/17/two-month-javascript-learn/" title="近两个月加强javascript的学习 (2008年04月17日)">近两个月加强javascript的学习</a></li>
	<li><a href="http://www.11gz.com/blog/2008/05/09/css-js-in-a-document/" title="把JS与CSS可在同一个文件里共存 (2008年05月9日)">把JS与CSS可在同一个文件里共存</a></li>
	<li><a href="http://www.11gz.com/blog/2008/05/25/js-html-static-list-page/" title="利用js实现静态分页 (2008年05月25日)">利用js实现静态分页</a></li>
	<li><a href="http://www.11gz.com/blog/2008/12/15/two-book-learn/" title="两本新书到手，继续学习 (2008年12月15日)">两本新书到手，继续学习</a></li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://www.11gz.com/blog/2009/01/09/simple-beautification-select/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>预留退路+分离javascript+向后兼容性</title>
		<link>http://www.11gz.com/blog/2008/12/15/retreat-separation-backward/</link>
		<comments>http://www.11gz.com/blog/2008/12/15/retreat-separation-backward/#comments</comments>
		<pubDate>Mon, 15 Dec 2008 14:07:09 +0000</pubDate>
		<dc:creator>heluyao</dc:creator>
				<category><![CDATA[JS/Ajax/AS]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[兼容性]]></category>
		<category><![CDATA[分离]]></category>
		<category><![CDATA[预留退路]]></category>

		<guid isPermaLink="false">http://www.11gz.com/blog/?p=261</guid>
		<description><![CDATA[　　谈谈这两天学到的一些新东西，就算是做个记录，自己也好随时来看看，增强记忆；同时也让喜欢js的朋友们也多了解一些有用的东西。

预留退路：确保网页在没有JavaScript的情况下也能正... ]]></description>
			<content:encoded><![CDATA[<p>　　谈谈这两天学到的一些新东西，就算是做个记录，自己也好随时来看看，增强记忆；同时也让喜欢js的朋友们也多了解一些有用的东西。</p>
<blockquote><ol>
<li>预留退路：确保网页在没有JavaScript的情况下也能正常工作。</li>
<li>分离JavaScript：把网页的结构和内容与JavaScript脚本的动作行为分开。</li>
<li>向后兼容性：确保老版本的浏览器不会因为你的JavaScript脚本而死机。</li>
</ol>
</blockquote>
<p>　　其实这些东西说来说去也就是一条：养成良好的JavaScript编程习惯(事实上也并非一件简单的事)。</p>
<p>　　<strong>预留退路</strong>，如果你正确地给JavaScript考虑了“退路”问题，就可以让用户在浏览器不支持或已关闭JavaScript的情况下也能够顺利浏览到原本该有的信息(虽然某些功能不可用，但至少保证内容是可见的)。</p>
<p>　　<strong>分离javascript</strong>：顾名思义，就是将js脚本完完全全的迁移出html/xhtml文档，这样做是只有利而无弊的。可能在某些程度上会使得js脚本变得稍显复杂，但这些都是可以接受的。</p>
<p>　　<strong>向后兼容性</strong>：现在，绝大多数的浏览器都能或多或少的支持JavaScript，同时对DOM的支持也都是很不错滴。但还是存在一些比较古老的浏览器，而正好它们却有可能无法理解DOM提供的方法和属性。解决方法比较容易实现，通过if语句，判断出结果从而选择该采取怎样的行动——这种检测叫做<em>对象检测</em>(object detection)。</p>
<p>　　由于时间关系，该文章未提及解决方法的具体案例，网上有很多类似的例子可以查阅的，多多利用Google和百度吧！</p>

	<ul class="st-related-posts">
	<li><a href="http://www.11gz.com/blog/2008/04/17/two-month-javascript-learn/" title="近两个月加强javascript的学习 (2008年04月17日)">近两个月加强javascript的学习</a></li>
	<li><a href="http://www.11gz.com/blog/2010/03/20/javascript-event-platform-compatible/" title="补习:跨平台的javascript事件 (2010年03月20日)">补习:跨平台的javascript事件</a></li>
	<li><a href="http://www.11gz.com/blog/2009/01/09/simple-beautification-select/" title="简单解决“丑陋”的select下拉框 (2009年01月9日)">简单解决“丑陋”的select下拉框</a></li>
	<li><a href="http://www.11gz.com/blog/2008/05/09/css-js-in-a-document/" title="把JS与CSS可在同一个文件里共存 (2008年05月9日)">把JS与CSS可在同一个文件里共存</a></li>
	<li><a href="http://www.11gz.com/blog/2008/05/25/js-html-static-list-page/" title="利用js实现静态分页 (2008年05月25日)">利用js实现静态分页</a></li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://www.11gz.com/blog/2008/12/15/retreat-separation-backward/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>两本新书到手，继续学习</title>
		<link>http://www.11gz.com/blog/2008/12/15/two-book-learn/</link>
		<comments>http://www.11gz.com/blog/2008/12/15/two-book-learn/#comments</comments>
		<pubDate>Mon, 15 Dec 2008 13:29:23 +0000</pubDate>
		<dc:creator>heluyao</dc:creator>
				<category><![CDATA[JS/Ajax/AS]]></category>
		<category><![CDATA[纯属扯淡]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[书籍]]></category>

		<guid isPermaLink="false">http://www.11gz.com/blog/?p=259</guid>
		<description><![CDATA[　　前几天去逛当当网，看中两本书，一时冲动就买了。现在当当的发货速度比以前快多了，赞一个！下面就所说这两本书吧！
　　两本都是“图灵”的，WEB开发系列。喜欢他家的书，不是一... ]]></description>
			<content:encoded><![CDATA[<p>　　前几天去逛当当网，看中两本书，一时冲动就买了。现在当当的发货速度比以前快多了，赞一个！下面就所说这两本书吧！</p>
<p>　　两本都是“图灵”的，WEB开发系列。喜欢他家的书，不是一两次买了，推荐大家想买这类书籍的都可以选择“图灵”的。</p>
<ol>
<li>《JavaScript DOM 编程艺术》— Jeremy Keith著</li>
<li>《JavaScript 高级程序设计》— Nicholas C.Zakas著</li>
</ol>
<p>　　前者已经看得差不多了，从中确实受益不浅。对DOM又一个比较完善的理解了，也似乎明白究竟如何做到“预留退路”、“代码分离”、“向后兼容”着三点要素，但还需要更多的开发经验。</p>
<p>　　后者我还没开始学习，准备先好好消化了前者的精华后再陆续跟进。留更多的时间给这本书，很明显后者的难度要大很多。</p>
<p>　　同时我也会通过博客与大家一起分享我的学习成果，一起进步！理想万岁！-_-~!</p>

	<ul class="st-related-posts">
	<li><a href="http://www.11gz.com/blog/2008/12/15/retreat-separation-backward/" title="预留退路+分离javascript+向后兼容性 (2008年12月15日)">预留退路+分离javascript+向后兼容性</a></li>
	<li><a href="http://www.11gz.com/blog/2008/04/17/two-month-javascript-learn/" title="近两个月加强javascript的学习 (2008年04月17日)">近两个月加强javascript的学习</a></li>
	<li><a href="http://www.11gz.com/blog/2009/01/09/simple-beautification-select/" title="简单解决“丑陋”的select下拉框 (2009年01月9日)">简单解决“丑陋”的select下拉框</a></li>
	<li><a href="http://www.11gz.com/blog/2008/05/09/css-js-in-a-document/" title="把JS与CSS可在同一个文件里共存 (2008年05月9日)">把JS与CSS可在同一个文件里共存</a></li>
	<li><a href="http://www.11gz.com/blog/2008/05/25/js-html-static-list-page/" title="利用js实现静态分页 (2008年05月25日)">利用js实现静态分页</a></li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://www.11gz.com/blog/2008/12/15/two-book-learn/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>js实现下拉导航菜单[3种]</title>
		<link>http://www.11gz.com/blog/2008/11/05/js-drop-down-navigation/</link>
		<comments>http://www.11gz.com/blog/2008/11/05/js-drop-down-navigation/#comments</comments>
		<pubDate>Wed, 05 Nov 2008 08:01:40 +0000</pubDate>
		<dc:creator>heluyao</dc:creator>
				<category><![CDATA[JS/Ajax/AS]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[导航]]></category>
		<category><![CDATA[菜单]]></category>

		<guid isPermaLink="false">http://11gz-blog.528u.com/blog/?p=151</guid>
		<description><![CDATA[最近几天在弄一些管理界面，说到管理界面，自然就离不开一个能打开收起的菜单了。就顺便整理一下，方便有需要的朋友使用。以下有3种，每种都有其优点，根据需要选择吧！
第一种，也是... ]]></description>
			<content:encoded><![CDATA[<p>最近几天在弄一些管理界面，说到管理界面，自然就离不开一个能打开收起的菜单了。就顺便整理一下，方便有需要的朋友使用。以下有3种，每种都有其优点，根据需要选择吧！</p>
<p>第一种，也是最简单实用的一种，正因为简单，也有其不完善的一面。</p>
<div class="hl-title">&#19979;&#36733;: <a href="http://www.11gz.com/blog/wp-content/plugins/coolcode/coolcode.php?p=151&amp;download=code1.html">code1.html</a></div><div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: #660;">meta</span><span style="color: Gray;"> </span><span style="color: #00008b;">http-equiv</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">Content-Type</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">content</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">text/html; charset=utf-8</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: Olive;">/&gt;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">script</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">type</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">text/javascript</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: #ffa500;">&lt;!-- </span></li>
<li><span style="color: #ffa500;">function getObject(objectId) { </span></li>
<li><span style="color: #ffa500;"> if(document.getElementById &amp;&amp; document.getElementById(objectId)) { </span></li>
<li><span style="color: #ffa500;"> return document.getElementById(objectId); </span></li>
<li><span style="color: #ffa500;"> } </span></li>
<li><span style="color: #ffa500;"> else if (document.all &amp;&amp; document.all(objectId)) { </span></li>
<li><span style="color: #ffa500;"> return document.all(objectId); </span></li>
<li><span style="color: #ffa500;"> } </span></li>
<li><span style="color: #ffa500;"> else if (document.layers &amp;&amp; document.layers[objectId]) { </span></li>
<li><span style="color: #ffa500;"> return document.layers[objectId]; </span></li>
<li><span style="color: #ffa500;"> } </span></li>
<li><span style="color: #ffa500;"> else { </span></li>
<li><span style="color: #ffa500;"> return false; </span></li>
<li><span style="color: #ffa500;"> } </span></li>
<li><span style="color: #ffa500;">} </span></li>
<li><span style="color: #ffa500;">&nbsp;</span></li>
<li><span style="color: #ffa500;">function showHide(e,objname){&nbsp; &nbsp;&nbsp; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; var obj = getObject(objname); </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; if(obj.style.display == &quot;none&quot;){ </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; obj.style.display = &quot;block&quot;; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; e.className=&quot;xias&quot;; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; }else{ </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; obj.style.display = &quot;none&quot;; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; e.className=&quot;rights&quot;; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; } </span></li>
<li><span style="color: #ffa500;">} </span></li>
<li><span style="color: #ffa500;">--&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: #660;">script</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">style</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">type</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">text/css</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">body { font-size:12px; margin:20px; padding:0; text-align:left;} </span></li>
<li><span style="color: Gray;">dl,dt,dd,ul,ol,li,p,div,input,h1,h2,h3,h4,h5,h6 { margin:0; padding:0;} </span></li>
<li><span style="color: Gray;">li { list-style:none;} </span></li>
<li><span style="color: Gray;">h2 { font-family:&quot;黑体&quot;; font-size:24px; text-align:center; line-height:32px;} </span></li>
<li><span style="color: Gray;">h5 { font-size:12px; text-align:center; font-weight:normal; color:#666; line-height:28px;} </span></li>
<li><span style="color: Gray;">.libiao_menu { margin-bottom:15px;} </span></li>
<li><span style="color: Gray;">.libiao_menu h3 a { margin-top:15px; margin-bottom:15px; display:block; background:url(../picture/user_11.gif) no-repeat 20px 0; width:130px; height:28px; font-size:14px; text-align:left; padding-left:65px; padding-top:13px; color:#0066cc;} </span></li>
<li><span style="color: Gray;">.libiao_menu dl { margin-left:30px; margin-top:5px;} </span></li>
<li><span style="color: Gray;">.libiao_menu dl dt { font-size:14px; line-height:24px;} </span></li>
<li><span style="color: Gray;">.libiao_menu dl dt a { padding-left:13px; color:#333;} </span></li>
<li><span style="color: Gray;">.libiao_menu dl dt a.rights { background:url(http://www.11gz.com/blog/images/user_23.gif) no-repeat 0 3px;} </span></li>
<li><span style="color: Gray;">.libiao_menu dl dt a.xias { background:url(http://www.11gz.com/blog/images/user_23.gif) no-repeat 0 -41px;} </span></li>
<li><span style="color: Gray;">.libiao_menu dl dd { padding-left:20px;} </span></li>
<li><span style="color: Gray;">.libiao_menu dl dd ul {} </span></li>
<li><span style="color: Gray;">.libiao_menu dl dd ul li { font-size:14px; line-height:24px;} </span></li>
<li><span style="color: Gray;">.libiao_menu dl dd ul li a { color:#06c;} </span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: #660;">style</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">h2</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">js2级下拉导航列表[1]</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">h2</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">h5</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">本文出处：</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">http://www.11gz.com/</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">target</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">_blank</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">Heluyao's Blog</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">，转载请保留</span><span style="color: Olive;">&lt;</span><span style="color: #660;">span</span><span style="color: Gray;"> </span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">color:#f00; font-weight:bold;</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">出处链接</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">span</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">！</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">h5</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">div</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">libiao_menu</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">dl</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">dt</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">xias</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">onclick</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">showHide(this,'items0');</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">我的订单</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">dt</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">dd</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">items0</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">display: block;</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">所有订单</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">需要支付的订单</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">处理中的订单</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">需要确认收货的订单</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">dd</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">dl</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">dl</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">dt</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">xias</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">onclick</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">showHide(this,'items1');</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">帐户管理</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">dt</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">dd</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">items1</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">display: block;</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">我的积分</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">管理收货地址</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">dd</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">dl</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">dl</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">dt</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">xias</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">onclick</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">showHide(this,'items2');</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">我的</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">dt</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">dd</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">items2</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">display: block;</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">我的收藏</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">我的评论</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">dd</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">dl</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">dl</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">dt</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">xias</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">onclick</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">showHide(this,'items3');</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">个人信息管理</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">dt</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">dd</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">items3</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">display: block;</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">编辑个人档案</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">修改密码</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">dd</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">dl</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">div</span><span style="color: Olive;">&gt;</span></li></ol></div>
<p>第二种：功能上比第一种要强，预览查看效果就会有明显的感觉。当打开另一个下拉列表时，之前打开的会关闭合拢。实用了YAHOO一个操作DOM的函数库。</p>
<div class="hl-title">&#19979;&#36733;: <a href="http://www.11gz.com/blog/wp-content/plugins/coolcode/coolcode.php?p=151&amp;download=code2.html">code2.html</a></div><div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: #660;">meta</span><span style="color: Gray;"> </span><span style="color: #00008b;">http-equiv</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">Content-Type</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">content</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">text/html; charset=utf-8</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: Olive;">/&gt;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">script</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">type</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">text/javascript</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">src</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">http://www.11gz.com/yahoo-dom-event.js</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">script</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">script</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">type</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">text/javascript</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: #ffa500;">&lt;!-- </span></li>
<li><span style="color: #ffa500;">function fnInitMenu(){ </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; YAHOO.namespace('Menu'); </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; var sMenuId = &quot;qMenu&quot;; //导航的ID名 </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; var sMenu2ClassName = &quot;qMenu2&quot;; //二级菜单的className </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; var sMenu1ActiveClassName = &quot;activeItem&quot;; //当前激活的一级菜单className </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; var oMenu = YAHOO.util.Dom.get(sMenuId); </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; YAHOO.Menu.hide = function(obj){ </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; var menu2 = YAHOO.util.Dom.getElementsByClassName(sMenu2ClassName,&quot;ul&quot;,oMenu); </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; for(var i=0;i&lt;menu2.length;i++){ </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(menu2[i].parentNode == obj) continue;&nbsp; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; menu2[i].style.display=&quot;none&quot;; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; YAHOO.util.Dom.removeClass(menu2[i].parentNode,sMenu1ActiveClassName);&nbsp; &nbsp;&nbsp; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; } </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; } </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; YAHOO.Menu.fold = function(ev){ </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; var a =YAHOO.util.Event.getTarget(ev); </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; var b =YAHOO.util.Dom.getLastChild(a);&nbsp; &nbsp;&nbsp; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; if(YAHOO.util.Dom.hasClass(a,sMenu1ActiveClassName)){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(YAHOO.util.Dom.hasClass(b,sMenu2ClassName)){ </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; b.style.display = &quot;none&quot;; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; YAHOO.util.Dom.removeClass(a,sMenu1ActiveClassName);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; }else{ </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; if(YAHOO.util.Dom.hasClass(b,sMenu2ClassName)){ </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; YAHOO.Menu.hide(); </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; b.style.display = &quot;block&quot;; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; YAHOO.util.Dom.addClass(a,sMenu1ActiveClassName); </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; } </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; } </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; YAHOO.Menu.init = new function(){&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; var c = YAHOO.util.Dom.getChildren(sMenuId);&nbsp; &nbsp;&nbsp; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; for(var j=0;j&lt;c.length;j++){ </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; YAHOO.util.Event.on(c[j],&quot;click&quot;,YAHOO.Menu.fold); </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(YAHOO.util.Dom.hasClass(c[j],sMenu1ActiveClassName)){ </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var oNotHide =c[j]; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;&nbsp; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; } </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; YAHOO.Menu.hide(oNotHide); </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp; </span></li>
<li><span style="color: #ffa500;">} </span></li>
<li><span style="color: #ffa500;">YAHOO.util.Event.onDOMReady(fnInitMenu); </span></li>
<li><span style="color: #ffa500;">--&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: #660;">script</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">style</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">type</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">text/css</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">*{ margin:0; padding:0;&nbsp; &nbsp; list-style:none;} </span></li>
<li><span style="color: Gray;">body { margin:20px; text-align:left; font-family:&quot;宋体&quot;;} </span></li>
<li><span style="color: Gray;">h2 { font-family:&quot;黑体&quot;; font-size:24px; text-align:center; line-height:32px;} </span></li>
<li><span style="color: Gray;">h5 { font-size:12px; text-align:center; font-weight:normal; color:#666; line-height:28px;} </span></li>
<li><span style="color: Gray;">.menu {} </span></li>
<li><span style="color: Gray;">.menu li { line-height:24px; background:url(http://www.11gz.com/blog/images/user_23.gif) no-repeat 0 8px; font-size:14px; text-align:left; padding-left:10px; cursor:pointer;} </span></li>
<li><span style="color: Gray;">.menu li.activeItem { background:url(http://www.11gz.com/blog/images/user_23.gif) no-repeat 0 -36px;} </span></li>
<li><span style="color: Gray;">.menu li ul { margin-bottom:5px;} </span></li>
<li><span style="color: Gray;">.menu li ul li { font-size:12px; text-align:left; background:#fff; line-height:22px; margin-left:-10px; cursor:auto;} </span></li>
<li><span style="color: Gray;">.menu li ul li.activeItem { background:none;} </span></li>
<li><span style="color: Gray;">.menu li ul li a { color:#06c; font-size:14px; text-decoration:underline;} </span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: #660;">style</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">h2</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">js2级下拉导航列表[2]</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">h2</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">h5</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">本文出处：</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">http://www.11gz.com/</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">target</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">_blank</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">Heluyao's Blog</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">，转载请保留</span><span style="color: Olive;">&lt;</span><span style="color: #660;">span</span><span style="color: Gray;"> </span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">color:#f00; font-weight:bold;</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">出处链接</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">span</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">！</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">h5</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">menu</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">qMenu</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">大类一 </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">display: none;</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">qMenu2</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表一</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表二</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表三</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表四</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">大类二 </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">display: none;</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">qMenu2</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表一</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表二</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表三</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表四</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">大类三 </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">display: none;</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">qMenu2</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表一</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表二</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表三</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表四</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">大类四 </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">display: none;</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">qMenu2</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表一</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表二</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表三</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表四</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">大类五 </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">display: none;</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">qMenu2</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表一</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表二</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表三</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表四</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">大类六 </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">display: none;</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">qMenu2</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表一</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表二</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表三</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">列表四</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span></li></ol></div>
<p>第三种：这个功能很强大的说，绝对无限级。只要你按照标签嵌套的模式，想实现多少级就多少几，而且不会存在性能的问题。原理也比较简单。仅仅只是标签的display属性变换。同样也用了一个js框架，主要用于操作文档DOM节点。而且该js框架很小，5k而已咯！值得推荐！</p>
<div class="hl-title">&#19979;&#36733;: <a href="http://www.11gz.com/blog/wp-content/plugins/coolcode/coolcode.php?p=151&amp;download=code3.html">code3.html</a></div><div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: #660;">meta</span><span style="color: Gray;"> </span><span style="color: #00008b;">http-equiv</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">Content-Type</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">content</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">text/html; charset=utf-8</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: Olive;">/&gt;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">style</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">type</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">text/css</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; *{ margin:0; padding:0;&nbsp; &nbsp; list-style:none;} </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; body { margin:20px;} </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; h2 { font-family:&quot;黑体&quot;; font-size:24px; text-align:center; line-height:32px;} </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; h5 { font-size:12px; text-align:center; font-weight:normal; color:#666; line-height:28px;} </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; #nav a { text-decoration:underline;color:#06c; font-size:14px; line-height:24px;} </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; #nav ul{ margin-bottom:5px;} </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; #nav strong{ color:#696;} </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; #nav.dyn li ul{ display:none;} </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; #nav.dyn li ul.show{ display:block;} </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; #nav.dyn li{ padding-left:15px;} </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; #nav.dyn li.parent{&nbsp; &nbsp; background:url(http://www.11gz.com/blog/images/user_23.gif) 5px 10px no-repeat;} </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; #nav.dyn li.open{ background:url(http://www.11gz.com/blog/images/user_23.gif) 5px -34px no-repeat;} </span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">style</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">script</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">type</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">text/javascript</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">src</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">http://www.11gz.com/DOMhelp.js</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">script</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">script</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">type</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">text/javascript</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: #ffa500;">&lt;!-- </span></li>
<li><span style="color: #ffa500;">sn={ </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; dynamicClass:'dyn', </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; showClass:'show', </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; parentClass:'parent', </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; openClass:'open', </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; navID:'nav', </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; init:function(){ </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; var triggerLink; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; if(!document.getElementById || !document.createTextNode){return;} </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; var nav=document.getElementById(sn.navID); </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; if(!nav){return;} </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; DOMhelp.cssjs('add',nav,sn.dynamicClass);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; var nested=nav.getElementsByTagName('ul'); </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; for(var i=0;i&lt;nested.length;i++){ </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; triggerLink=nested[i].parentNode.getElementsByTagName('a')[0]; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; DOMhelp.cssjs('add',triggerLink.parentNode,sn.parentClass);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; DOMhelp.addEvent(triggerLink,'click',sn.changeSection,false); </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; triggerLink.onclick=DOMhelp.safariClickFix; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(nested[i].parentNode.getElementsByTagName('strong').length&gt;0){ </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; DOMhelp.cssjs('add',triggerLink.parentNode,sn.openClass);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; DOMhelp.cssjs('add',nested[i],sn.showClass); </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; } </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; }, </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; changeSection:function(e){ </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; var t=DOMhelp.getTarget(e); </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; var firstList=t.parentNode.getElementsByTagName('ul')[0]; </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; if(DOMhelp.cssjs('check',firstList,sn.showClass)){ </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; DOMhelp.cssjs('remove',firstList,sn.showClass) </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; DOMhelp.cssjs('swap',t.parentNode,sn.openClass,sn.parentClass); </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; } else { </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; DOMhelp.cssjs('add',firstList,sn.showClass) </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; DOMhelp.cssjs('swap',t.parentNode,sn.openClass,sn.parentClass); </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; } </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; &nbsp; &nbsp; DOMhelp.cancelClick(e); </span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; } </span></li>
<li><span style="color: #ffa500;">} </span></li>
<li><span style="color: #ffa500;">DOMhelp.addEvent(window,'load',sn.init,false); </span></li>
<li><span style="color: #ffa500;">--&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: #660;">script</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">h2</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">js实现无限级下拉导航列表</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">h2</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">h5</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">本文出处：</span><span style="color: Olive;">&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">http://www.11gz.com/</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">target</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">_blank</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">Heluyao's Blog</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">，转载请保留</span><span style="color: Olive;">&lt;</span><span style="color: #660;">span</span><span style="color: Gray;"> </span><span style="color: #00008b;">style</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">color:#f00; font-weight:bold;</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">出处链接</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">span</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">！</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">h5</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">nav</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">主页</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">产品</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">大类别一</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">小类别一</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">次类别一</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">次类别二</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">小类别二</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">大类别二</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">大类别三</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">小类别一</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">小类别二</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">服务</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">大类别一</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">大类别二</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">大类别三</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">合作</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">关于我们</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">大类别一</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">小类别一</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">小类别二</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">大类别二</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">小类别一</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">小类别二</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">大类别三</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">小类别一</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">小类别二</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">大类别四</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">联系我们</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">大类别一</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">大类别二</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; &nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span></li></ol></div>
<p>　　相信你能找到你想要的！</p>

	<ul class="st-related-posts">
	<li><a href="http://www.11gz.com/blog/2008/12/15/retreat-separation-backward/" title="预留退路+分离javascript+向后兼容性 (2008年12月15日)">预留退路+分离javascript+向后兼容性</a></li>
	<li><a href="http://www.11gz.com/blog/2008/04/17/two-month-javascript-learn/" title="近两个月加强javascript的学习 (2008年04月17日)">近两个月加强javascript的学习</a></li>
	<li><a href="http://www.11gz.com/blog/2009/01/09/simple-beautification-select/" title="简单解决“丑陋”的select下拉框 (2009年01月9日)">简单解决“丑陋”的select下拉框</a></li>
	<li><a href="http://www.11gz.com/blog/2008/05/09/css-js-in-a-document/" title="把JS与CSS可在同一个文件里共存 (2008年05月9日)">把JS与CSS可在同一个文件里共存</a></li>
	<li><a href="http://www.11gz.com/blog/2008/05/25/js-html-static-list-page/" title="利用js实现静态分页 (2008年05月25日)">利用js实现静态分页</a></li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://www.11gz.com/blog/2008/11/05/js-drop-down-navigation/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>CSS或js实现行间交替背景色效果</title>
		<link>http://www.11gz.com/blog/2008/09/24/css-js-alternating-background/</link>
		<comments>http://www.11gz.com/blog/2008/09/24/css-js-alternating-background/#comments</comments>
		<pubDate>Wed, 24 Sep 2008 07:48:45 +0000</pubDate>
		<dc:creator>heluyao</dc:creator>
				<category><![CDATA[JS/Ajax/AS]]></category>
		<category><![CDATA[html/css/xml/xsl]]></category>
		<category><![CDATA[background]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://11gz-blog.528u.com/blog/?p=152</guid>
		<description><![CDATA[　　本文介绍两种方法，都挺简单的，略懂前端的同志们都应该能理解的。
1.利用CSS控制行的属性：
&#19979;&#36733;: code.html&#60;style type=&#34;text/css&#34;&#62;&#160;
ul { list-style:none; font-size:12px; line-heigh... ]]></description>
			<content:encoded><![CDATA[<p>　　本文介绍两种方法，都挺简单的，略懂前端的同志们都应该能理解的。</p>
<p>1.利用CSS控制行的属性：</p>
<div class="hl-title">&#19979;&#36733;: <a href="http://www.11gz.com/blog/wp-content/plugins/coolcode/coolcode.php?p=152&amp;download=code.html">code.html</a></div><div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: #660;">style</span><span style="color: Gray;"> </span><span style="color: #00008b;">type</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">text/css</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">ul { list-style:none; font-size:12px; line-height:20px; color:#666;} </span></li>
<li><span style="color: Gray;">ul li{background-color: expression(this.sourceIndex%2==0?'#EAF8FD':'#ffffff');}&nbsp; </span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: #660;">style</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp; </span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">myul1</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·河北作协副主席：我要给韩寒当爹真相</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·易建联：在美国去超市没有被认出来</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·徐友渔：买到假药举报无门的亲身经历</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·航天员如何在太空中吃饭上厕所(图) </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·90后大学生艳装军训雷晕教官(图)</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·北京报纸涨价便宜了谁</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·河北作协副主席：我要给韩寒当爹真相</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·易建联：在美国去超市没有被认出来</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·徐友渔：买到假药举报无门的亲身经历</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·航天员如何在太空中吃饭上厕所(图) </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·90后大学生艳装军训雷晕教官(图)</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·北京报纸涨价便宜了谁</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;&nbsp; </span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span></li></ol></div>
<p>　　通过判断奇偶数来确定li的背景颜色，很简单吧！</p>
<p>2.利用JS控制各行的交替背景。</p>
<div class="hl-title">&#19979;&#36733;: <a href="http://www.11gz.com/blog/wp-content/plugins/coolcode/coolcode.php?p=152&amp;download=code2.html">code2.html</a></div><div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: #660;">style</span><span style="color: Gray;"> </span><span style="color: #00008b;">type</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">text/css</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">ul { list-style:none; color:#666; font-size:12px;} </span></li>
<li><span style="color: Gray;">.li01 { background:#EAF8FD; } </span></li>
<li><span style="color: Gray;">.li02 { background:#fff; } </span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: #660;">style</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">list01</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·河北作协副主席：我要给韩寒当爹真相</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·易建联：在美国去超市没有被认出来</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·徐友渔：买到假药举报无门的亲身经历</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·航天员如何在太空中吃饭上厕所(图) </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·90后大学生艳装军训雷晕教官(图)</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·北京报纸涨价便宜了谁</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·河北作协副主席：我要给韩寒当爹真相</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·易建联：在美国去超市没有被认出来</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·徐友渔：买到假药举报无门的亲身经历</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·航天员如何在太空中吃饭上厕所(图) </span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·90后大学生艳装军训雷晕教官(图)</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp; </span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">·北京报纸涨价便宜了谁</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">Script</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">type</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">text/javascript</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">objName=document.getElementById(&quot;list01&quot;).getElementsByTagName(&quot;li&quot;); </span></li>
<li><span style="color: Gray;">for (i=0;i</span><span style="color: Olive;">&lt;</span><span style="color: #660;">objName</span><span style="color: Gray;">.</span><span style="color: #00008b;">length</span><span style="color: Gray;">;</span><span style="color: #00008b;">i</span><span style="color: Gray;">++){ </span></li>
<li><span style="color: Gray;">(</span><span style="color: #00008b;">i</span><span style="color: Gray;">%</span><span style="color: #00008b;">2</span><span style="color: Gray;">==</span><span style="color: #00008b;">0</span><span style="color: Gray;">)?(</span><span style="color: #00008b;">objName</span><span style="color: Gray;">(</span><span style="color: #00008b;">i</span><span style="color: Gray;">).</span><span style="color: #00008b;">className</span><span style="color: Gray;"> = </span><span style="color: #080;">&quot;</span><span style="color: #066;">li01</span><span style="color: #080;">&quot;</span><span style="color: Gray;">)</span><span style="color: #00008b;">:</span><span style="color: Gray;">(</span><span style="color: #00008b;">objName</span><span style="color: Gray;">(</span><span style="color: #00008b;">i</span><span style="color: Gray;">).</span><span style="color: #00008b;">className</span><span style="color: Gray;"> = </span><span style="color: #080;">&quot;</span><span style="color: #066;">li02</span><span style="color: #080;">&quot;</span><span style="color: Gray;">); </span></li>
<li><span style="color: Gray;">} </span></li>
<li><span style="color: Gray;">&lt;/</span><span style="color: #660;">Script</span><span style="color: Olive;">&gt;</span></li></ol></div>
<p>　　两个方法都不错哦！值得推荐的！</p>

	<ul class="st-related-posts">
	<li><a href="http://www.11gz.com/blog/2008/05/09/css-js-in-a-document/" title="把JS与CSS可在同一个文件里共存 (2008年05月9日)">把JS与CSS可在同一个文件里共存</a></li>
	<li><a href="http://www.11gz.com/blog/2008/12/15/retreat-separation-backward/" title="预留退路+分离javascript+向后兼容性 (2008年12月15日)">预留退路+分离javascript+向后兼容性</a></li>
	<li><a href="http://www.11gz.com/blog/2008/05/09/css-load-way-optimization/" title="页面中 CSS 加载方式的优化 (2008年05月9日)">页面中 CSS 加载方式的优化</a></li>
	<li><a href="http://www.11gz.com/blog/2008/04/17/two-month-javascript-learn/" title="近两个月加强javascript的学习 (2008年04月17日)">近两个月加强javascript的学习</a></li>
	<li><a href="http://www.11gz.com/blog/2008/05/20/web-page-gray-css/" title="让网页变灰色，一句css就搞定 (2008年05月20日)">让网页变灰色，一句css就搞定</a></li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://www.11gz.com/blog/2008/09/24/css-js-alternating-background/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>利用js实现静态分页</title>
		<link>http://www.11gz.com/blog/2008/05/25/js-html-static-list-page/</link>
		<comments>http://www.11gz.com/blog/2008/05/25/js-html-static-list-page/#comments</comments>
		<pubDate>Sun, 25 May 2008 06:23:11 +0000</pubDate>
		<dc:creator>heluyao</dc:creator>
				<category><![CDATA[JS/Ajax/AS]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[静态分页]]></category>

		<guid isPermaLink="false">http://11gz-blog.528u.com/blog/?p=98</guid>
		<description><![CDATA[　　由于工作上的需要，做了个用js分页的效果。不牵涉到服务器端的语言，所以只有用js来分页。
　　把demo提供给大家，原本调xml文档的部分，这里就不提供了。
&#19979;&#36733;: code1.html&#60;!DOC... ]]></description>
			<content:encoded><![CDATA[<p>　　由于工作上的需要，做了个用js分页的效果。不牵涉到服务器端的语言，所以只有用js来分页。</p>
<p>　　把demo提供给大家，原本调xml文档的部分，这里就不提供了。</p>
<div class="hl-title">&#19979;&#36733;: <a href="http://www.11gz.com/blog/wp-content/plugins/coolcode/coolcode.php?p=98&amp;download=code1.html">code1.html</a></div><div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: Gray;">!</span><span style="color: #00008b;">DOCTYPE</span><span style="color: Gray;"> </span><span style="color: #00008b;">html</span><span style="color: Gray;"> </span><span style="color: #00008b;">PUBLIC</span><span style="color: Gray;"> </span><span style="color: #080;">&quot;</span><span style="color: #066;">-//W3C//DTD XHTML 1.0 Transitional//EN</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #080;">&quot;</span><span style="color: #066;">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">html</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">xmlns</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">http://www.w3.org/1999/xhtml</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">head</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">meta</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">http-equiv</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">Content-Type</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">content</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">text/html; charset=utf-8</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: Olive;">/&gt;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">title</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">js实现静态分页</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">title</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">style</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">type</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">text/css</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">table.dynamic tbody tr{ display:none;}</span></li>
<li><span style="color: Gray;">table.dynamic tbody tr.show{display:block;}</span></li>
<li><span style="color: Gray;">html&gt;body table.dynamic tbody tr.show{ display:table-row;}</span></li>
<li><span style="color: Gray;">th,td{ padding:5px;}</span></li>
<li><span style="color: Gray;">th{ background:#eef;}</span></li>
<li><span style="color: Gray;">table.pagelist{ border:1px solid #ccc; border-bottom:none; border-right:none; width:500px;}</span></li>
<li><span style="color: Gray;">table.pagelist td,table.pagelist th{ font-size:12px; border:1px solid #ccc; border-top:none; border-left:none;}</span></li>
<li><span style="color: Gray;">p.paginatedNav{ font-size:12px; width:480px; margin-top:8px; text-align:right;}</span></li>
<li><span style="color: Gray;">p.paginatedNav a{ color:#ccc;}</span></li>
<li><span style="color: Gray;">p.paginatedNav a:link,p.paginatedNav a:visited{ color:#369;}</span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: #660;">style</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">script</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">type</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">text/javascript</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">src</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">http://www.11gz.com/DOMhelp.js</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">script</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">script</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">type</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">text/javascript</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: #ffa500;">&lt;!--</span></li>
<li><span style="color: #ffa500;">pn = {</span></li>
<li><span style="color: #ffa500;"> //css class</span></li>
<li><span style="color: #ffa500;"> paginationClass:'pagelist',</span></li>
<li><span style="color: #ffa500;"> dynamicClass:'dynamic',</span></li>
<li><span style="color: #ffa500;"> showClass:'show',</span></li>
<li><span style="color: #ffa500;"> paginationNavClass:'paginatedNav',</span></li>
<li><span style="color: #ffa500;">&nbsp;</span></li>
<li><span style="color: #ffa500;"> //设置每页显示数据条数</span></li>
<li><span style="color: #ffa500;"> increase : 5,</span></li>
<li><span style="color: #ffa500;"> //分页导航的替换文本</span></li>
<li><span style="color: #ffa500;"> counter:'&amp;#160;&amp;#160;_x_到_y_条&amp;#160;&amp;#160;共_z_条&amp;#160;&amp;#160;',</span></li>
<li><span style="color: #ffa500;"> nextLabel:'下一页',</span></li>
<li><span style="color: #ffa500;"> previousLabel:'上一页',</span></li>
<li><span style="color: #ffa500;">&nbsp;</span></li>
<li><span style="color: #ffa500;"> init:function(){</span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp;&nbsp; var tablebody;</span></li>
<li><span style="color: #ffa500;">&nbsp; if(!document.getElementById || !document.createTextNode){return;}</span></li>
<li><span style="color: #ffa500;">&nbsp; var ts=document.getElementsByTagName('table');</span></li>
<li><span style="color: #ffa500;">&nbsp; for(var i=0;i&lt;ts.length;i++){</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; if(!DOMhelp.cssjs('check',ts[i],pn.paginationClass)){continue;}</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; if(ts[i].getElementsByTagName('tr').length&lt;pn.increase+1){continue;}</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; tablebody=ts[i].getElementsByTagName('tbody')[0];</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; ts[i].datarows=tablebody.getElementsByTagName('tr');</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; ts[i].datarowsize=ts[i].datarows.length;</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; ts[i].current=null;</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; DOMhelp.cssjs('add',ts[i],pn.dynamicClass);</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; pn.createPaginationNav(ts[i]);</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; pn.showSection(ts[i],0);</span></li>
<li><span style="color: #ffa500;">&nbsp; }</span></li>
<li><span style="color: #ffa500;"> },</span></li>
<li><span style="color: #ffa500;"> createPaginationNav:function(table){</span></li>
<li><span style="color: #ffa500;">&nbsp; var navBefore,navAfter;</span></li>
<li><span style="color: #ffa500;">&nbsp; navBefore=document.createElement('p');</span></li>
<li><span style="color: #ffa500;">&nbsp; DOMhelp.cssjs('add',navBefore,pn.paginationNavClass);</span></li>
<li><span style="color: #ffa500;">&nbsp; navBefore.appendChild(DOMhelp.createLink('#',pn.previousLabel));</span></li>
<li><span style="color: #ffa500;">&nbsp; navBefore.appendChild(document.createElement('span'));</span></li>
<li><span style="color: #ffa500;">&nbsp; counter=pn.counter.replace('_x_',1);</span></li>
<li><span style="color: #ffa500;">&nbsp; counter=counter.replace('_y_',pn.increase);</span></li>
<li><span style="color: #ffa500;">&nbsp; counter=counter.replace('_z_',table.datarowsize-1);</span></li>
<li><span style="color: #ffa500;">&nbsp; navBefore.getElementsByTagName('span')[0].innerHTML=counter;</span></li>
<li><span style="color: #ffa500;">&nbsp; navBefore.appendChild(DOMhelp.createLink('#',pn.nextLabel));</span></li>
<li><span style="color: #ffa500;">&nbsp; table.parentNode.insertBefore(navBefore,table);</span></li>
<li><span style="color: #ffa500;">&nbsp; navAfter=navBefore.cloneNode(true);</span></li>
<li><span style="color: #ffa500;">&nbsp; table.parentNode.insertBefore(navAfter,table.nextSibling);</span></li>
<li><span style="color: #ffa500;">&nbsp; table.topPrev=navBefore.getElementsByTagName('a')[0];</span></li>
<li><span style="color: #ffa500;">&nbsp; table.topNext=navBefore.getElementsByTagName('a')[1];</span></li>
<li><span style="color: #ffa500;">&nbsp; table.bottomPrev=navAfter.getElementsByTagName('a')[0];</span></li>
<li><span style="color: #ffa500;">&nbsp; table.bottomNext=navAfter.getElementsByTagName('a')[1];</span></li>
<li><span style="color: #ffa500;">&nbsp; DOMhelp.addEvent(table.topPrev,'click',pn.navigate,false);&nbsp; </span></li>
<li><span style="color: #ffa500;">&nbsp; DOMhelp.addEvent(table.bottomPrev,'click',pn.navigate,false);&nbsp; </span></li>
<li><span style="color: #ffa500;">&nbsp; DOMhelp.addEvent(table.topNext,'click',pn.navigate,false);&nbsp; </span></li>
<li><span style="color: #ffa500;">&nbsp; DOMhelp.addEvent(table.bottomNext,'click',pn.navigate,false);&nbsp; </span></li>
<li><span style="color: #ffa500;">&nbsp; table.bottomNext.onclick=DOMhelp.safariClickFix;</span></li>
<li><span style="color: #ffa500;">&nbsp; table.topPrev.onclick=DOMhelp.safariClickFix;</span></li>
<li><span style="color: #ffa500;">&nbsp; table.bottomPrev.onclick=DOMhelp.safariClickFix;</span></li>
<li><span style="color: #ffa500;">&nbsp; table.topNext.onclick=DOMhelp.safariClickFix;</span></li>
<li><span style="color: #ffa500;">&nbsp; table.topCounter=navBefore.getElementsByTagName('span')[0];</span></li>
<li><span style="color: #ffa500;">&nbsp; table.bottomCounter=navAfter.getElementsByTagName('span')[0];</span></li>
<li><span style="color: #ffa500;"> },</span></li>
<li><span style="color: #ffa500;"> navigate:function(e){</span></li>
<li><span style="color: #ffa500;">&nbsp; var start, table;</span></li>
<li><span style="color: #ffa500;">&nbsp; var t=DOMhelp.getTarget(e);</span></li>
<li><span style="color: #ffa500;">&nbsp; while(t.nodeName.toLowerCase()!='a'){t=t.parentNode;}</span></li>
<li><span style="color: #ffa500;">&nbsp; if(t.getAttribute('href') == null || t.getAttribute('href') == ''){return;}</span></li>
<li><span style="color: #ffa500;">&nbsp; if(t.parentNode.previousSibling.nodeName.toLowerCase() == 'table'){</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; table=t.parentNode.previousSibling; </span></li>
<li><span style="color: #ffa500;">&nbsp; }else{</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; table=t.parentNode.nextSibling; </span></li>
<li><span style="color: #ffa500;">&nbsp; }</span></li>
<li><span style="color: #ffa500;">&nbsp; if(t==table.topNext || t==table.bottomNext){</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; start=table.current+pn.increase;</span></li>
<li><span style="color: #ffa500;">&nbsp; }else if(t==table.topPrev || t==table.bottomPrev){</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; start=table.current-pn.increase;</span></li>
<li><span style="color: #ffa500;">&nbsp; }</span></li>
<li><span style="color: #ffa500;">&nbsp; pn.showSection(table,start)</span></li>
<li><span style="color: #ffa500;"> },</span></li>
<li><span style="color: #ffa500;"> showSection:function(table,start){</span></li>
<li><span style="color: #ffa500;">&nbsp; var i;</span></li>
<li><span style="color: #ffa500;">&nbsp; pn.changePaginationNav(table,start);</span></li>
<li><span style="color: #ffa500;">&nbsp; if(table.current!=null){</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; for(i=table.current;i&lt;table.current+pn.increase;i++){</span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; if(table.datarows[i]){</span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp;&nbsp; DOMhelp.cssjs('remove',table.datarows[i],pn.showClass);</span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; }</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; } </span></li>
<li><span style="color: #ffa500;">&nbsp; }</span></li>
<li><span style="color: #ffa500;">&nbsp; for(i=start;i&lt;start+pn.increase;i++){</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; if(table.datarows[i]){</span></li>
<li><span style="color: #ffa500;">&nbsp; &nbsp; DOMhelp.cssjs('add',table.datarows[i],pn.showClass); </span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; }</span></li>
<li><span style="color: #ffa500;">&nbsp; }</span></li>
<li><span style="color: #ffa500;">&nbsp; table.current=start;</span></li>
<li><span style="color: #ffa500;"> },</span></li>
<li><span style="color: #ffa500;"> changePaginationNav:function(table,start){</span></li>
<li><span style="color: #ffa500;">&nbsp; if(start-pn.increase&lt;0){</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; table.bottomPrev.removeAttribute('href');</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; table.topPrev.removeAttribute('href');</span></li>
<li><span style="color: #ffa500;">&nbsp; }else{</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; table.bottomPrev.setAttribute('href','#');</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; table.topPrev.setAttribute('href','#');</span></li>
<li><span style="color: #ffa500;">&nbsp; }</span></li>
<li><span style="color: #ffa500;">&nbsp; if(start+pn.increase&gt;table.datarowsize-2){</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; table.bottomNext.removeAttribute('href');</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; table.topNext.removeAttribute('href'); </span></li>
<li><span style="color: #ffa500;">&nbsp; }else{</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; table.bottomNext.setAttribute('href','#');</span></li>
<li><span style="color: #ffa500;">&nbsp;&nbsp; table.topNext.setAttribute('href','#');</span></li>
<li><span style="color: #ffa500;">&nbsp; }</span></li>
<li><span style="color: #ffa500;">&nbsp; var counter=pn.counter.replace('_x_',start+1);</span></li>
<li><span style="color: #ffa500;">&nbsp; var last=start+pn.increase;</span></li>
<li><span style="color: #ffa500;">&nbsp; if(last&gt;table.datarowsize){last=table.datarowsize;}</span></li>
<li><span style="color: #ffa500;">&nbsp; counter=counter.replace('_y_',last);</span></li>
<li><span style="color: #ffa500;">&nbsp; counter=counter.replace('_z_',table.datarowsize);</span></li>
<li><span style="color: #ffa500;">&nbsp; table.topCounter.innerHTML=counter;</span></li>
<li><span style="color: #ffa500;">&nbsp; table.bottomCounter.innerHTML=counter;</span></li>
<li><span style="color: #ffa500;"> }</span></li>
<li><span style="color: #ffa500;">}</span></li>
<li><span style="color: #ffa500;">DOMhelp.addEvent(window,'load',pn.init,false);</span></li>
<li><span style="color: #ffa500;">--&gt;</span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: #660;">script</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: #660;">head</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">body</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">table</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">pagelist</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">cellspacing</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">0</span><span style="color: #080;">&quot;</span><span style="color: Gray;"> </span><span style="color: #00008b;">cellpadding</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">0</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">thead</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Gray;"> </span><span style="color: #00008b;">scope</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">col</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">ID</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Gray;"> </span><span style="color: #00008b;">scope</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">col</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">作者</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Gray;"> </span><span style="color: #00008b;">scope</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">col</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">标题</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Gray;"> </span><span style="color: #00008b;">scope</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">col</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">介绍</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: #660;">thead</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Olive;">&lt;</span><span style="color: #660;">tbody</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">1</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">萧涤非 等著</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">唐诗鉴赏辞典</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">2</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">左民安</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">细说汉字（精装版）</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">这是一本介绍汉字基本知识的通俗读物</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">3</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">萧涤非 等著</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">唐诗鉴赏辞典</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">4</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">左民安</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">细说汉字（精装版）</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">这是一本介绍汉字基本知识的通俗读物</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">5</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">萧涤非 等著</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">唐诗鉴赏辞典</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">6</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">左民安</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">细说汉字（精装版）</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">这是一本介绍汉字基本知识的通俗读物</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">7</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">萧涤非 等著</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">唐诗鉴赏辞典</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">8</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">左民安</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">细说汉字（精装版）</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">这是一本介绍汉字基本知识的通俗读物</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">9</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">萧涤非 等著</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">唐诗鉴赏辞典</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">10</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">左民安</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">细说汉字（精装版）</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">这是一本介绍汉字基本知识的通俗读物</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">11</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">萧涤非 等著</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">唐诗鉴赏辞典</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">12</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">左民安</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">细说汉字（精装版）</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">这是一本介绍汉字基本知识的通俗读物</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">13</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">萧涤非 等著</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">唐诗鉴赏辞典</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">14</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">左民安</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">细说汉字（精装版）</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">这是一本介绍汉字基本知识的通俗读物</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">15</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">萧涤非 等著</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">唐诗鉴赏辞典</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">16</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">左民安</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">细说汉字（精装版）</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">这是一本介绍汉字基本知识的通俗读物</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">17</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">萧涤非 等著</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">唐诗鉴赏辞典</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">18</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">左民安</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">细说汉字（精装版）</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">这是一本介绍汉字基本知识的通俗读物</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">19</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">萧涤非 等著</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">唐诗鉴赏辞典</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">20</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">左民安</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">细说汉字（精装版）</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">这是一本介绍汉字基本知识的通俗读物</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">21</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">萧涤非 等著</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">唐诗鉴赏辞典</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">《唐诗鉴赏辞典》为代表的文学鉴赏辞典系列</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">22</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">th</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">左民安</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">细说汉字（精装版）</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">这是一本介绍汉字基本知识的通俗读物</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">td</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">tr</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: #660;">tbody</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: #660;">table</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: #660;">body</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: #660;">html</span><span style="color: Olive;">&gt;</span></li></ol></div>
<p>　　你可以下载代码测试效果。</p>

	<ul class="st-related-posts">
	<li><a href="http://www.11gz.com/blog/2008/12/15/retreat-separation-backward/" title="预留退路+分离javascript+向后兼容性 (2008年12月15日)">预留退路+分离javascript+向后兼容性</a></li>
	<li><a href="http://www.11gz.com/blog/2008/04/17/two-month-javascript-learn/" title="近两个月加强javascript的学习 (2008年04月17日)">近两个月加强javascript的学习</a></li>
	<li><a href="http://www.11gz.com/blog/2009/01/09/simple-beautification-select/" title="简单解决“丑陋”的select下拉框 (2009年01月9日)">简单解决“丑陋”的select下拉框</a></li>
	<li><a href="http://www.11gz.com/blog/2008/05/09/css-js-in-a-document/" title="把JS与CSS可在同一个文件里共存 (2008年05月9日)">把JS与CSS可在同一个文件里共存</a></li>
	<li><a href="http://www.11gz.com/blog/2008/12/15/two-book-learn/" title="两本新书到手，继续学习 (2008年12月15日)">两本新书到手，继续学习</a></li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://www.11gz.com/blog/2008/05/25/js-html-static-list-page/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>JQuery 是什么</title>
		<link>http://www.11gz.com/blog/2008/05/22/what-is-jquery/</link>
		<comments>http://www.11gz.com/blog/2008/05/22/what-is-jquery/#comments</comments>
		<pubDate>Thu, 22 May 2008 01:11:51 +0000</pubDate>
		<dc:creator>heluyao</dc:creator>
				<category><![CDATA[JS/Ajax/AS]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[JQuery]]></category>

		<guid isPermaLink="false">http://11gz-blog.528u.com/blog/?p=100</guid>
		<description><![CDATA[　　jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的J&#246;rn Zaefferer，罗马尼亚的Stefan Petre等等。
　　jQuery是继prototype之后又一个优秀的Jav... ]]></description>
			<content:encoded><![CDATA[<p>　　jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的J&ouml;rn Zaefferer，罗马尼亚的Stefan Petre等等。</p>
<p>　　jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。</p>
<p>　　它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。</p>
<p>　　jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。</p>
<p>　　jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。</p>
<p>　　jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。</p>
<p>　　Jquery是继prototype之后又一个优秀的Javascrīpt框架。对prototype我使用不多，简单了解过。但使用上jquery之后，马上被她的优雅吸引住了。有人使用这样的一比喻来比较prototype和jquery：prototype就像Java，而jquery就像ruby.实际上我比较喜欢java（少接触Ruby 罢了）但是jquery的简单的实用的确有相当大的吸引力啊！在项目里我把jquery作为自己唯一的框架类包。使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。</p>
<p>　　<b>一，找到你了！</b></p>
<p>　　还记得&#36;()这个东西吧？prototype还是DWR都使用了这个函数代替document.getElementById()。没错，jquery也跟风了。为达到document.getElementById()的目的，jquery是这样写的：</p>
<p>　　代码</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: #660;">var</span><span style="color: Gray;"> </span><span style="color: #404040;">someElement</span><span style="color: Gray;"> = $</span><span style="color: Olive;">(</span><span style="color: Gray;">”#</span><span style="color: #404040;">myId</span><span style="color: Gray;">”</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li></ol></div>
<p>　　看起来比其他两个框架的要多了一个#，好，看看下面的用法：</p>
<p>　　代码</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Gray;">$</span><span style="color: Olive;">(</span><span style="color: Gray;">”</span><span style="color: #404040;">div</span><span style="color: Gray;"> </span><span style="color: #404040;">p</span><span style="color: Gray;">”</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span><span style="color: Olive;">(</span><span style="color: Maroon;">1</span><span style="color: Olive;">)</span></li>
<li><span style="color: Gray;">$</span><span style="color: Olive;">(</span><span style="color: Gray;">”</span><span style="color: #404040;">div</span><span style="color: Gray;">.</span><span style="color: #404040;">container</span><span style="color: Gray;">”</span><span style="color: Olive;">)(</span><span style="color: Maroon;">2</span><span style="color: Olive;">)</span></li>
<li><span style="color: Gray;">$</span><span style="color: Olive;">(</span><span style="color: Gray;">”</span><span style="color: #404040;">div</span><span style="color: Gray;"> #</span><span style="color: #404040;">msg</span><span style="color: Gray;">”</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span><span style="color: Olive;">(</span><span style="color: Maroon;">3</span><span style="color: Olive;">)</span></li>
<li><span style="color: Gray;">$</span><span style="color: Olive;">(</span><span style="color: Gray;">”</span><span style="color: #404040;">table</span><span style="color: Gray;">&nbsp;</span><span style="color: #404040;">a</span><span style="color: Gray;">”,</span><span style="color: #404040;">context</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span><span style="color: Olive;">(</span><span style="color: Maroon;">4</span><span style="color: Olive;">)</span></li></ol></div>
<p>　　在prototype里看过这样的写法吗？第一行代码得到所有&lt;div&gt;标签下的&lt;p&gt;元素。第二行代码得到class 为container的&lt;div&gt;元素,第三行代码得到&lt;div&gt;标签下面id为msg的元素。第四行代码得到context为上下文的table里面所有的连接元素。</p>
<p>　　如果你熟悉CSS，你会觉得这些写法很眼熟！对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。</p>
<p>　　<b>二，Jquery对象？</b></p>
<p>　　jquery提供了很多便利的函数，如each(fn)，但是使用这些函数的前提是：你使用的对象是Jquer对象。使一个Dom对象成为一个Jquery对象很简单，通过下面一些方式（只是一部分）：</p>
<p>　　代码</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: #660;">var</span><span style="color: Gray;"> </span><span style="color: #404040;">a</span><span style="color: Gray;"> = $</span><span style="color: Olive;">(</span><span style="color: Gray;">”#</span><span style="color: #404040;">cid</span><span style="color: Gray;">”</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span><span style="color: Olive;">(</span><span style="color: Maroon;">1</span><span style="color: Olive;">)</span></li>
<li><span style="color: #660;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: #404040;">b</span><span style="color: Gray;"> = $</span><span style="color: Olive;">(</span><span style="color: Gray;">”&lt;</span><span style="color: #404040;">p</span><span style="color: Gray;">&gt;</span><span style="color: #404040;">hello</span><span style="color: Gray;">&lt;</span><span style="color: #080;">/</span><span style="color: #066;">p&gt;”);(2)</span></li>
<li><span style="color: #066;">var c = document.createElement(”table”); var tb = $&amp;copy;</span></li></ol></div>
<p>　　<b>三，代替body标签的onload</b></p>
<p>　　这个惯例，也许是除了&#36;()之外，用得最多的地方了。下面一段代码：</p>
<p>　　代码</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Gray;">$</span><span style="color: Olive;">(</span><span style="color: Teal;">document</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: #404040;">ready</span><span style="color: Olive;">(</span><span style="color: #660;">function</span><span style="color: Olive;">(){</span></li>
<li><span style="color: #404040;">alert</span><span style="color: Olive;">(</span><span style="color: Gray;">”</span><span style="color: #404040;">hello</span><span style="color: Gray;">”</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">})</span><span style="color: Gray;">;</span><span style="color: Olive;">(</span><span style="color: Maroon;">1</span><span style="color: Olive;">)</span></li></ol></div>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Gray;">&lt;</span><span style="color: #404040;">body</span><span style="color: Gray;"> </span><span style="color: #404040;">onload</span><span style="color: Gray;">=”</span><span style="color: #404040;">alert</span><span style="color: Olive;">(</span><span style="color: Gray;">’</span><span style="color: #404040;">hello</span><span style="color: Gray;">’</span><span style="color: Olive;">)</span><span style="color: Gray;">;”&gt;（</span><span style="color: Maroon;">2</span><span style="color: Gray;">）</span></li></ol></div>
<p>　　上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作，即&#36;(document).ready (fn)可以在一个页面中重复出现，而不会冲突。基本上Jqeury的很多plugin都是利用这个特性，正因为这个特性，多个plugin共同使用起来，在初始化时不会发生冲突。</p>
<p>　　不管怎么说，这个惯例可以分离javascrīpt与HTML。推荐使用。</p>
<p>　　<b>四，事件机制</b></p>
<p>　　我大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写onclick = “fn()”,使用jquery可以使javascrīpt代码与html代码分离，保持HTML的清洁，还可以很轻松地绑定事件，甚至你可以不知道“事件”这个名词。</p>
<p>　　代码</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Gray;">$</span><span style="color: Olive;">(</span><span style="color: Teal;">document</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: #404040;">ready</span><span style="color: Olive;">(</span><span style="color: #660;">function</span><span style="color: Olive;">(){</span></li>
<li><span style="color: Gray;">$</span><span style="color: Olive;">(</span><span style="color: Gray;">”#</span><span style="color: #404040;">clear</span><span style="color: Gray;">”</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: #404040;">click</span><span style="color: Olive;">(</span><span style="color: #660;">function</span><span style="color: Olive;">(){</span></li>
<li><span style="color: #404040;">alert</span><span style="color: Olive;">(</span><span style="color: Gray;">”</span><span style="color: #404040;">i</span><span style="color: Gray;">&nbsp;</span><span style="color: #404040;">am</span><span style="color: Gray;"> </span><span style="color: #404040;">about</span><span style="color: Gray;"> </span><span style="color: #404040;">to</span><span style="color: Gray;"> </span><span style="color: #404040;">clear</span><span style="color: Gray;"> </span><span style="color: #404040;">the</span><span style="color: Gray;"> </span><span style="color: #404040;">table</span><span style="color: Gray;">”</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">})</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">$</span><span style="color: Olive;">(</span><span style="color: Gray;">”</span><span style="color: #404040;">form</span><span style="color: Olive;">[</span><span style="color: Maroon;">0</span><span style="color: Olive;">]</span><span style="color: Gray;">”</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: #404040;">submit</span><span style="color: Olive;">(</span><span style="color: #404040;">validate</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">})</span><span style="color: Gray;">;</span></li>
<li><span style="color: #660;">function</span><span style="color: Gray;">&nbsp;</span><span style="color: #404040;">validate</span><span style="color: Olive;">(){</span></li>
<li><span style="color: #ffa500;">//do some form validation</span></li>
<li><span style="color: Olive;">}</span></li></ol></div>
<p>　　<b>五，同一函数实现set</b></p>
<p>　　代码</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Gray;">$</span><span style="color: Olive;">(</span><span style="color: Gray;">”#</span><span style="color: #404040;">msg</span><span style="color: Gray;">”</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: #404040;">html</span><span style="color: Olive;">()</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">$</span><span style="color: Olive;">(</span><span style="color: Gray;">”#</span><span style="color: #404040;">msg</span><span style="color: Gray;">”</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: #404040;">html</span><span style="color: Olive;">(</span><span style="color: Gray;">”</span><span style="color: #404040;">hello</span><span style="color: Gray;">”</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li></ol></div>
<p>　　上面两行代码，调用了同样的函数。但结果却差别很大。 </p>
<p>　　第一行是返回指定元素的HTML值，第二行则是将hello这串字符设置到指定元素中。jquery的函数大部分有这样的特性。</p>
<p>　　<b>六，ajax</b></p>
<p>　　这是一个ajax横行的时代。多少人，了不了解ajax的都跟着用上一把。呵。使用jquery实现ajax同样简单异常</p>
<p>　　代码</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Gray;">$.</span><span style="color: #404040;">get</span><span style="color: Olive;">(</span><span style="color: Gray;">”</span><span style="color: #404040;">search</span><span style="color: Gray;">.</span><span style="color: #660;">do</span><span style="color: Gray;">”,</span><span style="color: Olive;">{</span><span style="color: #404040;">id</span><span style="color: Gray;">:</span><span style="color: Maroon;">1</span><span style="color: Olive;">}</span><span style="color: Gray;">,</span><span style="color: #404040;">rend</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: #660;">function</span><span style="color: Gray;">&nbsp;</span><span style="color: #404040;">rend</span><span style="color: Olive;">(</span><span style="color: #404040;">xml</span><span style="color: Olive;">){</span></li>
<li><span style="color: #404040;">alert</span><span style="color: Olive;">(</span><span style="color: #404040;">xml</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">(</span><span style="color: Maroon;">1</span><span style="color: Olive;">)</span></li>
<li><span style="color: Gray;">$.</span><span style="color: #404040;">post</span><span style="color: Olive;">(</span><span style="color: Gray;">”</span><span style="color: #404040;">search</span><span style="color: Gray;">.</span><span style="color: #660;">do</span><span style="color: Gray;">”,</span><span style="color: Olive;">{</span><span style="color: #404040;">id</span><span style="color: Gray;">:</span><span style="color: Maroon;">1</span><span style="color: Olive;">}</span><span style="color: Gray;">,</span><span style="color: #404040;">rend</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: #660;">function</span><span style="color: Gray;">&nbsp;</span><span style="color: #404040;">rend</span><span style="color: Olive;">(</span><span style="color: #404040;">xml</span><span style="color: Olive;">){</span></li>
<li><span style="color: #404040;">alert</span><span style="color: Olive;">(</span><span style="color: #404040;">xml</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">}</span><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">(</span><span style="color: Maroon;">2</span><span style="color: Olive;">)</span></li>
<li><span style="color: Gray;">$</span><span style="color: Olive;">(</span><span style="color: Gray;">”#</span><span style="color: #404040;">msg</span><span style="color: Gray;">”</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: #404040;">ajaxStart</span><span style="color: Olive;">(</span><span style="color: #660;">function</span><span style="color: Olive;">(){</span></li>
<li><span style="color: #660;">this</span><span style="color: Gray;">.</span><span style="color: #404040;">html</span><span style="color: Olive;">(</span><span style="color: Gray;">”正在加载。。。。”</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">})</span><span style="color: Gray;">;</span><span style="color: Olive;">(</span><span style="color: Maroon;">3</span><span style="color: Olive;">)</span></li>
<li><span style="color: Gray;">$</span><span style="color: Olive;">(</span><span style="color: Gray;">”#</span><span style="color: #404040;">msg</span><span style="color: Gray;">”</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: #404040;">ajaxSuccess</span><span style="color: Olive;">(</span><span style="color: #660;">function</span><span style="color: Olive;">(){</span></li>
<li><span style="color: #660;">this</span><span style="color: Gray;">.</span><span style="color: #404040;">html</span><span style="color: Olive;">(</span><span style="color: Gray;">”加载完成！”</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Olive;">})</span><span style="color: Gray;">;</span><span style="color: Olive;">(</span><span style="color: Maroon;">4</span><span style="color: Olive;">)</span></li></ol></div>
<p>　　这些都是较常用的方法，get和post用法一样。第一个参数是异步请求的url，第二个为参数，第三个回调方法。 </p>
<p>　　3，4的方法会在指定的Dom对象上绑定响应ajax执行的事件。当然，jquery的AJAX相关的函数不仅是这些，有兴趣可以去研究再多。</p>
<p>　　<b>七，渐入淡出</b></p>
<p>　　代码</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Gray;">$</span><span style="color: Olive;">(</span><span style="color: Gray;">”#</span><span style="color: #404040;">msg</span><span style="color: Gray;">”</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: #404040;">fadeIn</span><span style="color: Olive;">(</span><span style="color: Gray;">”</span><span style="color: #404040;">fast</span><span style="color: Gray;">”</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">$</span><span style="color: Olive;">(</span><span style="color: Gray;">”#</span><span style="color: #404040;">msg</span><span style="color: Gray;">”</span><span style="color: Olive;">)</span><span style="color: Gray;">.</span><span style="color: #404040;">fadeOut</span><span style="color: Olive;">(</span><span style="color: Gray;">”</span><span style="color: #404040;">slow</span><span style="color: Gray;">”</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li></ol></div>
<p>　　没错，上面两行代码已经分别实现了一个id为Msg的jquery对象的渐入和淡出。做一个像Gmail一样的动态加载通知条，用jquery就那么简单。两个函数接受的参数除了快慢等，还可以接收整型，作为渐入或淡出的完成时间，单位为MS。</p>
<p>　　<b>八，plugin</b></p>
<p>　　这也是一个插件的时代。
<p>　　jquery插件给我的感觉清一色的清洁，简单。如Jtip，要使用它的功能，只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了。其他事情插件全包。我喜欢jquery的一个重要原因是发现她已经有了很多很好，很精彩的插件。</p>
<p>　　写得很烂。可能大家看不出jquery的好处。嗯，光听是没用的，试用一下吧。你会发觉很有趣。</p>
<p>　　暂时告一段落吧。待有新的发现再来分享。</p>
<p>　　加一些Jquery的资源：</p>
<ul>
<li>http://www.visualjquery.com/index.xml 很好的API查询站点</li>
<li>http://jquery.com/demo/thickbox/ 知道lightBox吧，看看Jquery是怎样实现相同的东西</li>
<li>http://www.codylindley.com/blogstuff/js/jtip/ Jtip，实用的提示工具</li>
<li>http://jquery.com/plugins/ 很多牛的插件。</li>
<li>http://15daysofjquery.com/jquery 的15天教程</li>
<li>http://jquery.org.cn/visual/cn/index.xml //不错的JQUERY 中文学习 推荐</li>
</ul>
<p>　　jquery来源</p>
<p>　　jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的J&amp;ouml;rn Zaefferer，罗马尼亚的Stefan Petre等等。</p>
<p>　　jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。</p>
<p>　　它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。</p>
<p>　　jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。</p>
<p>　　jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。</p>
<p>　　jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。</p>
<p>　　jQuery的最新release版本是1.2.3。</p>

	<ul class="st-related-posts">
	<li><a href="http://www.11gz.com/blog/2008/12/15/retreat-separation-backward/" title="预留退路+分离javascript+向后兼容性 (2008年12月15日)">预留退路+分离javascript+向后兼容性</a></li>
	<li><a href="http://www.11gz.com/blog/2008/04/17/two-month-javascript-learn/" title="近两个月加强javascript的学习 (2008年04月17日)">近两个月加强javascript的学习</a></li>
	<li><a href="http://www.11gz.com/blog/2009/09/10/dreamweaver-jquery-jqueryapi/" title="给Dreamweaver安装jQuery插件jQuery_API.mxp (2009年09月10日)">给Dreamweaver安装jQuery插件jQuery_API.mxp</a></li>
	<li><a href="http://www.11gz.com/blog/2009/01/09/simple-beautification-select/" title="简单解决“丑陋”的select下拉框 (2009年01月9日)">简单解决“丑陋”的select下拉框</a></li>
	<li><a href="http://www.11gz.com/blog/2008/05/09/css-js-in-a-document/" title="把JS与CSS可在同一个文件里共存 (2008年05月9日)">把JS与CSS可在同一个文件里共存</a></li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://www.11gz.com/blog/2008/05/22/what-is-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JS实现多列等高</title>
		<link>http://www.11gz.com/blog/2008/05/11/js-multi-out-high/</link>
		<comments>http://www.11gz.com/blog/2008/05/11/js-multi-out-high/#comments</comments>
		<pubDate>Sun, 11 May 2008 10:16:13 +0000</pubDate>
		<dc:creator>heluyao</dc:creator>
				<category><![CDATA[JS/Ajax/AS]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://11gz-blog.528u.com/blog/?p=106</guid>
		<description><![CDATA[　　很多同学一定在为多列等高的问题头痛吧！今天提供一个很方便的控制多列等高的JS，可以控制多个标签，并循环遍历任意多个标签。不需要添加ID或class。很不错的！
　　先看html代码:
&#60... ]]></description>
			<content:encoded><![CDATA[<p>　　很多同学一定在为多列等高的问题头痛吧！今天提供一个很方便的控制多列等高的JS，可以控制多个标签，并循环遍历任意多个标签。不需要添加ID或class。很不错的！</p>
<p>　　先看html代码:</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: Olive;">&lt;</span><span style="color: #660;">ul</span><span style="color: Gray;"> </span><span style="color: #00008b;">id</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">news</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">h3</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">news title 1</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">h3</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">p</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">Descirption 1 阿斯</span><span style="color: Olive;">&lt;</span><span style="color: #660;">br</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">asas</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">p</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">p</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">more</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;"> </span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">more 1</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">p</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">h3</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">news title 2</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">h3</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">p</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">Descirption 1</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">p</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">p</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">more</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;"> </span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">more 1</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">p</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">h3</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">news title 3</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">h3</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">p</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">Descirption 1</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">p</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">p</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">more</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;"> </span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">more 1</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">p</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">h3</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">news title 4</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">h3</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">p</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">Descirption 1</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">p</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">&lt;</span><span style="color: #660;">p</span><span style="color: Gray;">&nbsp;</span><span style="color: #00008b;">class</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">more</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;&lt;</span><span style="color: #660;">a</span><span style="color: Gray;"> </span><span style="color: #00008b;">href</span><span style="color: Gray;">=</span><span style="color: #080;">&quot;</span><span style="color: #066;">#</span><span style="color: #080;">&quot;</span><span style="color: Olive;">&gt;</span><span style="color: Gray;">more 1</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">a</span><span style="color: Olive;">&gt;&lt;/</span><span style="color: #660;">p</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">&lt;/</span><span style="color: #660;">li</span><span style="color: Olive;">&gt;</span></li>
<li><span style="color: Olive;">&lt;/</span><span style="color: #660;">ul</span><span style="color: Olive;">&gt;</span></li></ol></div>
<p>　　这里是JS代码（有用到一个JS库，DOMHelp）:</p>
<div class="hl-surround"><ol class="hl-main ln-show" title="Double click to hide line number." ondblclick = "linenumber(this)"><li class="hl-firstline"><span style="color: #404040;">fixcolumns</span><span style="color: Gray;">=</span><span style="color: Olive;">{</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: #404040;">highest</span><span style="color: Gray;">:</span><span style="color: Maroon;">0</span><span style="color: Gray;">,</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: #404040;">moreClass</span><span style="color: Gray;">:</span><span style="color: #080;">'</span><span style="color: #066;">more</span><span style="color: #080;">'</span><span style="color: Gray;">,</span></li>
<li><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: #404040;">init</span><span style="color: Gray;">:</span><span style="color: #660;">function</span><span style="color: Olive;">(){</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: #660;">if</span><span style="color: Olive;">(</span><span style="color: Gray;">!</span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: #404040;">getElementById</span><span style="color: Gray;"> || !</span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: #404040;">createTextNode</span><span style="color: Olive;">){</span><span style="color: #660;">return</span><span style="color: Gray;">;</span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: #404040;">fixcolumns</span><span style="color: Gray;">.</span><span style="color: #404040;">n</span><span style="color: Gray;">=</span><span style="color: Teal;">document</span><span style="color: Gray;">.</span><span style="color: #404040;">getElementById</span><span style="color: Olive;">(</span><span style="color: #080;">'</span><span style="color: #066;">news</span><span style="color: #080;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: #660;">if</span><span style="color: Olive;">(</span><span style="color: Gray;">!</span><span style="color: #404040;">fixcolumns</span><span style="color: Gray;">.</span><span style="color: #404040;">n</span><span style="color: Olive;">){</span><span style="color: #660;">return</span><span style="color: Gray;">;</span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: #404040;">fixcolumns</span><span style="color: Gray;">.</span><span style="color: #404040;">fix</span><span style="color: Olive;">(</span><span style="color: #080;">'</span><span style="color: #066;">h3</span><span style="color: #080;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: #404040;">fixcolumns</span><span style="color: Gray;">.</span><span style="color: #404040;">fix</span><span style="color: Olive;">(</span><span style="color: #080;">'</span><span style="color: #066;">p</span><span style="color: #080;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: #404040;">fixcolumns</span><span style="color: Gray;">.</span><span style="color: #404040;">fix</span><span style="color: Olive;">(</span><span style="color: #080;">'</span><span style="color: #066;">li</span><span style="color: #080;">'</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp;&nbsp; </span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">}</span><span style="color: Gray;">,</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: #404040;">fix</span><span style="color: Gray;">:</span><span style="color: #660;">function</span><span style="color: Olive;">(</span><span style="color: #404040;">elm</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: #404040;">fixcolumns</span><span style="color: Gray;">.</span><span style="color: #404040;">getHighest</span><span style="color: Olive;">(</span><span style="color: #404040;">elm</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: #404040;">fixcolumns</span><span style="color: Gray;">.</span><span style="color: #404040;">fixElements</span><span style="color: Olive;">(</span><span style="color: #404040;">elm</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">}</span><span style="color: Gray;">,</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: #404040;">getHighest</span><span style="color: Gray;">:</span><span style="color: #660;">function</span><span style="color: Olive;">(</span><span style="color: #404040;">elm</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: #404040;">fixcolumns</span><span style="color: Gray;">.</span><span style="color: #404040;">highest</span><span style="color: Gray;">=</span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: #660;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: #404040;">temp</span><span style="color: Gray;">=</span><span style="color: #404040;">fixcolumns</span><span style="color: Gray;">.</span><span style="color: #404040;">n</span><span style="color: Gray;">.</span><span style="color: #404040;">getElementsByTagName</span><span style="color: Olive;">(</span><span style="color: #404040;">elm</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: #660;">for</span><span style="color: Olive;">(</span><span style="color: #660;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: #404040;">i</span><span style="color: Gray;">=</span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span><span style="color: #404040;">i</span><span style="color: Gray;">&lt;</span><span style="color: #404040;">temp</span><span style="color: Gray;">.</span><span style="color: #404040;">length</span><span style="color: Gray;">;</span><span style="color: #404040;">i</span><span style="color: Gray;">++</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp;&nbsp; </span><span style="color: #660;">if</span><span style="color: Olive;">(</span><span style="color: Gray;">!</span><span style="color: #404040;">temp</span><span style="color: Olive;">[</span><span style="color: #404040;">i</span><span style="color: Olive;">]</span><span style="color: Gray;">.</span><span style="color: #404040;">offsetHeight</span><span style="color: Olive;">){</span><span style="color: #660;">continue</span><span style="color: Gray;">;</span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp;&nbsp; </span><span style="color: #660;">if</span><span style="color: Olive;">(</span><span style="color: #404040;">temp</span><span style="color: Olive;">[</span><span style="color: #404040;">i</span><span style="color: Olive;">]</span><span style="color: Gray;">.</span><span style="color: #404040;">offsetHeight</span><span style="color: Gray;">&gt;</span><span style="color: #404040;">fixcolumns</span><span style="color: Gray;">.</span><span style="color: #404040;">highest</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: #404040;">fixcolumns</span><span style="color: Gray;">.</span><span style="color: #404040;">highest</span><span style="color: Gray;">=</span><span style="color: #404040;">temp</span><span style="color: Olive;">[</span><span style="color: #404040;">i</span><span style="color: Olive;">]</span><span style="color: Gray;">.</span><span style="color: #404040;">offsetHeight</span><span style="color: Gray;">; </span></li>
<li><span style="color: Gray;">&nbsp;&nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">}</span><span style="color: Gray;">,</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: #404040;">fixElements</span><span style="color: Gray;">:</span><span style="color: #660;">function</span><span style="color: Olive;">(</span><span style="color: #404040;">elm</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: #660;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: #404040;">temp</span><span style="color: Gray;">=</span><span style="color: #404040;">fixcolumns</span><span style="color: Gray;">.</span><span style="color: #404040;">n</span><span style="color: Gray;">.</span><span style="color: #404040;">getElementsByTagName</span><span style="color: Olive;">(</span><span style="color: #404040;">elm</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: #660;">for</span><span style="color: Olive;">(</span><span style="color: #660;">var</span><span style="color: Gray;">&nbsp;</span><span style="color: #404040;">i</span><span style="color: Gray;">=</span><span style="color: Maroon;">0</span><span style="color: Gray;">;</span><span style="color: #404040;">i</span><span style="color: Gray;">&lt;</span><span style="color: #404040;">temp</span><span style="color: Gray;">.</span><span style="color: #404040;">length</span><span style="color: Gray;">;</span><span style="color: #404040;">i</span><span style="color: Gray;">++</span><span style="color: Olive;">){</span></li>
<li><span style="color: Gray;">&nbsp;&nbsp; </span><span style="color: #660;">if</span><span style="color: Olive;">(</span><span style="color: Gray;">!</span><span style="color: #404040;">DOMhelp</span><span style="color: Gray;">.</span><span style="color: #404040;">cssjs</span><span style="color: Olive;">(</span><span style="color: #080;">'</span><span style="color: #066;">check</span><span style="color: #080;">'</span><span style="color: Gray;">,</span><span style="color: #404040;">temp</span><span style="color: Olive;">[</span><span style="color: #404040;">i</span><span style="color: Olive;">]</span><span style="color: Gray;">,</span><span style="color: #404040;">fixcolumns</span><span style="color: Gray;">.</span><span style="color: #404040;">moreClass</span><span style="color: Olive;">)){</span></li>
<li><span style="color: Gray;">&nbsp; &nbsp; </span><span style="color: #404040;">temp</span><span style="color: Olive;">[</span><span style="color: #404040;">i</span><span style="color: Olive;">]</span><span style="color: Gray;">.</span><span style="color: #404040;">style</span><span style="color: Gray;">.</span><span style="color: #404040;">height</span><span style="color: Gray;">=</span><span style="color: #404040;">parseInt</span><span style="color: Olive;">(</span><span style="color: #404040;">fixcolumns</span><span style="color: Gray;">.</span><span style="color: #404040;">highest</span><span style="color: Olive;">)</span><span style="color: Gray;">+</span><span style="color: #080;">'</span><span style="color: #066;">px</span><span style="color: #080;">'</span><span style="color: Gray;">; </span></li>
<li><span style="color: Gray;">&nbsp;&nbsp; </span><span style="color: Olive;">}</span><span style="color: Gray;">&nbsp;</span></li>
<li><span style="color: Gray;">&nbsp; </span><span style="color: Olive;">}</span></li>
<li><span style="color: Gray;">&nbsp;</span><span style="color: Olive;">}</span></li>
<li><span style="color: Olive;">}</span></li>
<li><span style="color: #404040;">DOMhelp</span><span style="color: Gray;">.</span><span style="color: #404040;">addEvent</span><span style="color: Olive;">(</span><span style="color: Teal;">window</span><span style="color: Gray;">,</span><span style="color: #080;">'</span><span style="color: #066;">load</span><span style="color: #080;">'</span><span style="color: Gray;">,</span><span style="color: #404040;">fixcolumns</span><span style="color: Gray;">.</span><span style="color: #404040;">init</span><span style="color: Gray;">,</span><span style="color: #660;">false</span><span style="color: Olive;">)</span><span style="color: Gray;">;</span></li></ol></div>
<p><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p>
<p>　　自己复制另存代码，测试一下，应该会与用到的时候。注意该处用到的DOMHelp库，是一个操作文档节点很方便且符合标准并兼容各浏览器的JS库。</p>

	<ul class="st-related-posts">
	<li><a href="http://www.11gz.com/blog/2008/12/15/retreat-separation-backward/" title="预留退路+分离javascript+向后兼容性 (2008年12月15日)">预留退路+分离javascript+向后兼容性</a></li>
	<li><a href="http://www.11gz.com/blog/2008/04/17/two-month-javascript-learn/" title="近两个月加强javascript的学习 (2008年04月17日)">近两个月加强javascript的学习</a></li>
	<li><a href="http://www.11gz.com/blog/2009/01/09/simple-beautification-select/" title="简单解决“丑陋”的select下拉框 (2009年01月9日)">简单解决“丑陋”的select下拉框</a></li>
	<li><a href="http://www.11gz.com/blog/2008/05/09/css-js-in-a-document/" title="把JS与CSS可在同一个文件里共存 (2008年05月9日)">把JS与CSS可在同一个文件里共存</a></li>
	<li><a href="http://www.11gz.com/blog/2008/05/25/js-html-static-list-page/" title="利用js实现静态分页 (2008年05月25日)">利用js实现静态分页</a></li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://www.11gz.com/blog/2008/05/11/js-multi-out-high/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>把JS与CSS可在同一个文件里共存</title>
		<link>http://www.11gz.com/blog/2008/05/09/css-js-in-a-document/</link>
		<comments>http://www.11gz.com/blog/2008/05/09/css-js-in-a-document/#comments</comments>
		<pubDate>Thu, 08 May 2008 16:12:13 +0000</pubDate>
		<dc:creator>heluyao</dc:creator>
				<category><![CDATA[JS/Ajax/AS]]></category>
		<category><![CDATA[html/css/xml/xsl]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://11gz-blog.528u.com/blog/?p=112</guid>
		<description><![CDATA[　　今天看了aoao的blog，学到了这一招，和大家分享一下。
&#60;!&#8211; /* window.onload=function(){ document.getElementById(&#8220;test2&#8243;).innerHTML=&#8221;传说中滴JS测试者。如果你看到我，那JS也生效了&#8221;... ]]></description>
			<content:encoded><![CDATA[<p>　　今天看了aoao的blog，学到了这一招，和大家分享一下。</p>
<p>&lt;!&#8211; /* window.onload=function(){ document.getElementById(&#8220;test2&#8243;).innerHTML=&#8221;传说中滴JS测试者。如果你看到我，那JS也生效了&#8221;; } &lt;!&#8211; */ &lt;!&#8211; #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;}</p>
<p>　　在网上运行时还要通过程序输出个“*/*”的头，不然MIME不对有的浏览器不干活。PHP的是这样：</p>
<p>　　&lt;?header(’Content-type: */*’);?&gt;</p>
<p>　　理论上在服务器上指定某种后缀的MIME是“*/*”应用也行得通，不过我没有试。把JS跟CSS写在同一个文件特别适合第三方调用的那种，虽然文件大了一点，但能少了一半的请求数，帅帅滴。补充说明，直接这样使用会是两个200的，要节省还要涉及到服务器配置，最少我还不知道单程序可以实现的。</p>
<p>　　如果你有兴趣，那么复制代码。测试一下。怎么样？神吧！其实也没什么，只是充分利用了注释符。不过还真未曾想到还有此一招。佩服佩服！</p>

	<ul class="st-related-posts">
	<li><a href="http://www.11gz.com/blog/2008/09/24/css-js-alternating-background/" title="CSS或js实现行间交替背景色效果 (2008年09月24日)">CSS或js实现行间交替背景色效果</a></li>
	<li><a href="http://www.11gz.com/blog/2008/12/15/retreat-separation-backward/" title="预留退路+分离javascript+向后兼容性 (2008年12月15日)">预留退路+分离javascript+向后兼容性</a></li>
	<li><a href="http://www.11gz.com/blog/2008/05/09/css-load-way-optimization/" title="页面中 CSS 加载方式的优化 (2008年05月9日)">页面中 CSS 加载方式的优化</a></li>
	<li><a href="http://www.11gz.com/blog/2008/04/17/two-month-javascript-learn/" title="近两个月加强javascript的学习 (2008年04月17日)">近两个月加强javascript的学习</a></li>
	<li><a href="http://www.11gz.com/blog/2008/05/20/web-page-gray-css/" title="让网页变灰色，一句css就搞定 (2008年05月20日)">让网页变灰色，一句css就搞定</a></li>
</ul>

]]></content:encoded>
			<wfw:commentRss>http://www.11gz.com/blog/2008/05/09/css-js-in-a-document/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
