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);// <div style=" height:300px; width:600px; margin:0 auto; text-align:center; font: bold 14px/20px;"> 生活不易，码农辛苦<br> 如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠<br> <img src="http://www.wfuyu.com/skin/images/weixin.png" height="200px" width="200px" alt="程序员人生"> </div> </div> <!--上下篇开始--> <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 class="r"> <div class="fxd">分享到:</div> <div data-bd-bind="1451183468798" class="bdsharebuttonbox bdshare-button-style0-32"><a href="#" class="bds_more" data-cmd="more"></a><a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a><a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"32"},"share":{},"image":{"viewList":["weixin","qzone","tsina","douban","tieba"],"viewText":"分享到：","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["weixin","qzone","tsina","douban","tieba"]}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> </div> </div> <div class="boxoff"> <strong>------分隔线----------------------------</strong> </div> <!--上下篇开始结束--> <script type="text/javascript"> var cpro_id="u2646824"; (window["cproStyleApi"] = window["cproStyleApi"] || {})[cpro_id]={at:"3",rsi0:"680",rsi1:"450",pat:"6",tn:"baiduCustNativeAD",rss1:"#FFFFFF",conBW:"1",adp:"1",ptt:"0",titFF:"%E5%BE%AE%E8%BD%AF%E9%9B%85%E9%BB%91",titFS:"14",rss2:"#000000",titSU:"0",ptbg:"90",piw:"0",pih:"0",ptp:"0"} </script> <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script> </div> <script> //右侧冻结 window.onload=function(){ var navFixed=document.getElementById('r_top'); var navscroll=navFixed.offsetTop; window.onscroll=function(){ var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; if(scrollTop>navscroll){ navFixed.style.position='fixed'; navFixed.style.top='0'; }else{ navFixed.style.position=''; navFixed.style.top=''; } } }; </script> <div class="content_r" > <div class="content_r" id="r_top"> <div class="right_member_info"> <div class="right_member_info_con"> <div class="right_member_img left"><img src="upload/images/2016/01/21/20160156a0e5e4a18bb.jpg" alt="为码而活"/></div> <div class="right_member_j left"> <div class="m_nic"><div class="user_level lv2"></div><a href="http://www.wfuyu.com/home/1/" target="_blank">为码而活</a></div> <div class="m_jifen" left>积分：<span class="red">4237</span></div> </div> </div> <div class="right_member_guanzhu" id="guanzhu"> <a class="user_guanzhu" href="javascript:void(0);" onclick="add_follow(1)"></a> </div> <div class="m_fs"> <div class="m_ifans"><span>15</span>粉丝</div> <div class="m_guanzhu"><span>7</span>关注</div> </div> </div> <div class="nav10"></div> <div class="content_right_title"> <div class="left">栏目热点</div> </div> <div class="list_text"> <ul> <li><a target="_blank" href="jscript/6763.html">view-source,JavaScript看网页源码</a></li> <li><a target="_blank" href="jscript/5531.html">JavaScript打造仿腾讯网弹出层效果(推荐)</a></li> <li><a target="_blank" href="jscript/7524.html">NodeList集合跟Array数组的区别</a></li> <li><a target="_blank" href="jscript/8256.html">JavaScript动态生成私有变量访问器</a></li> <li><a target="_blank" href="jscript/5782.html">JavaScript与Cookie(二)：利用Cookie记录用户登录信息</a></li> <li><a target="_blank" href="jscript/6543.html">Ajax+Javascript动态生成文本输入框</a></li> <li><a target="_blank" href="jscript/7031.html">复制文章时自动附加版权信息的JAVAscript代码</a></li> <li><a target="_blank" href="jscript/8653.html">Javascript字符串常量未结束的解决方法</a></li> </ul> </div> <div class="nav10"></div> <script type="text/javascript"> /*300*250 创建于 2016-05-21*/ var cpro_id = "u2646840"; </script> <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script> </div> </div> </div> <div class="nav10"></div> <div class="footer"> <div class="content"> <p>程序员人生，我编程，我富裕，记住wfuyu网，php教程，php学习，php手册，CMS模版制作</p> <p>声明：本站大部分内容是作者原创，少部分收集于互联网供大家一起学习，原版权很多不明，如有侵权请联系本站，谢谢！</p> <p> <a href="https://beian.miit.gov.cn" rel="nofollow" target="_blank">粤ICP备14040726号-1</a> 2015-2020 程序员人生 版权所有 <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_4714809'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s11.cnzz.com/stat.php%3Fid%3D4714809' type='text/javascript'%3E%3C/script%3E"));</script> </p> <div class="foot_img"> <a rel="nofollow" target="_blank" href="http://www.anquan.org"><img src="skin/images/d1.png" height="30" width="83"></a> <a rel="nofollow" href="http://www.pingpinganan.gov.cn/" target="_blank"> <img src="skin/images/d2.png" title="平平安安" alt="平平安安" border="0" height="46" width="53"> </a> <a rel="nofollow" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44011102000541" target="_blank"> <img title="备案网站" alt="备案网站" src="skin/images/d3.png" border="0" height="40" width="130"> </a> <a rel="nofollow" target="_blank" href="http://www.anquan.org"><img src="skin/images/d4.png" height="30" width="83"></a> </div> </div> </div> <div id="foot_layer"> <div id="f_close"><img src="skin/images/close.png" alt="关闭"></div> <a href="https://www.mzhang.cn/" target="_blank"><img src="upload/setting/2018115bebe907746cb.jpg" alt="程序员人生"></a> </div> <script> //点击左侧的隐藏 jQuery('#f_close').click(function(){ jQuery('#foot_layer').hide(); }); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <div style="display:none"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?ed7230f8c72727a826446d68d2709248"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </body> </html>
