JavaScript菜单项热点排序的实现示例，列表项或菜单项排序，按被点击次数排序（也可以是其他事件），这里只是一个示例而已，如果您想看到更完整的例子，可以在此基础上开发。
演示代码：
<div><ul id="menu"><li><span>First</span></li><li><span>Second</span></li><li><span>Third</span></li></ul><p id="status"></p><script>// 这种排序方法是一种默认模式// 默认初始情况有两种：// 第一种：level值未设定，默认取0；// 第二种：level值已给定，并且列表// 已经按照从大到小（从上到下）排列好了。// 所以，与上（前）面的元素比较即可。var sortIt = function _(elt) {var pes = elt.previousElementSibling;if (pes && elt.level > pes.level) {var ihtml = elt.innerHTML,ilevel = elt.level;elt.innerHTML = pes.innerHTML;elt.level = pes.level;pes.innerHTML = ihtml;pes.level = ilevel;_(pes);}};// RBI：打点// 这里level值为单击(onclick事件)的次数，// 而rank默认为排序号（从0开始）。// 单击次数越多（level值越大），rank越靠前。function rbiIt(elts) {var i;for (i = 0; i < elts.length; i += 1) {elts[i].onclick = function (i) {var level = elts[i].level || 0,rank = elts[i].rank || i;return function (e) {this.level = ++level;this.rank = rank;sortIt(this);document.getElementById("status").innerHTML = "(" + this.rank + " : " + this.level + ")";};}(i);}};// 初始化// 可以自己给定level和rank值var elts = document.getElementById("menu").children;// var elts = document.getElementsByTagName("li");var k;for (k = 0; k < elts.length; k += 1) {elts[k].level = 0;//elts[k].rank = 0;}rbiIt(elts);// <script type="text/javascript" src="skin/js/auto_img.js"></script> </div> <div class="_udz26f1p8k"></div> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6783848", container: "_udz26f1p8k", async: true }); </script> <!--上下篇开始--> <div class="boxoff"> <strong>------分隔线----------------------------</strong> </div> <div class="news_up"> <div class="l"> <p><b>上一篇</b> <a href="seo/9772.html" >中小站长在社区盈利过程中常犯的一些错误</a> </p> <p><b>下一篇</b> <a href="mySql/9774.html">如何让新装上的MYSQL数据库更加安全</a> </p> </div> </div> <div class="boxoff"> <strong>------分隔线----------------------------</strong> </div> <!--上下篇开始结束--> </div> <div class="nav10"></div> </div> </section> <section class="waplist1"> <h2><i></i><em></em>最新技术推荐</h2> <div class="waplist1_box"> <a href="http://m.wfuyu.com/jscript/25063.html" class="lb_box" target="_self"> <i class='ys'>1</i>深入浅出Fetch API 带你入解应用场景及适用问题</a> <a href="http://m.wfuyu.com/jscript/20733.html" class="lb_box" target="_self"> <i class='ys'>2</i>网页禁止复制内容的方法</a> <a href="http://m.wfuyu.com/jscript/16595.html" class="lb_box" target="_self"> <i class='ys'>3</i>JavaScript提高：005：ASP.NET使用easyUI TABS标签显示问题</a> <a href="http://m.wfuyu.com/jscript/16564.html" class="lb_box" target="_self"> <i >4</i>js如何立即退出函数</a> <a href="http://m.wfuyu.com/jscript/10533.html" class="lb_box" target="_self"> <i >5</i>javascript事件：获取事件对象getEvent函数</a> <a href="http://m.wfuyu.com/jscript/10529.html" class="lb_box" target="_self"> <i >6</i>Firefox下frameset取不到值的解决方法</a> <a href="http://m.wfuyu.com/jscript/10524.html" class="lb_box" target="_self"> <i >7</i>JavaScript数组实例：点击逐条读取文字</a> </header> <div class="_udz26f1p8k"></div> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6783848", container: "_udz26f1p8k", async: true }); </script> <!-- 多条广告如下脚本只需引入一次 --> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" > </script> <footer class="copyRight"> <p class="copy-1"> <a href="http://m.wfuyu.com/">回到首页</a><i></i> <a href="http://m.wfuyu.com/help/show/8.html">联系我们</a><i></i> <a href="/jscript/9773.html#top">返回顶部</a><i></i> <a style="width:56px; height:12px;" href="http://www.wfuyu.com/?b=topc"> <img src="http://m.wfuyu.com/skin/images/computer_03.png"> </a> </p> <p class="copy-2"><span> 程序员人生官网<br/>中国最全IT社区平台<br/> 粤ICP备14040726号-1 </span></p> </footer> <div style="display:none"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?052c8cb26e054cc327229ac4670ce08c"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </body> </html>