参考网站：https://www.jb51.net/article/27643.htm
截图如下：
a.
b.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>中文首字母排序</title> <link rel="stylesheet" href="css/listnav.css" type="text/css" media="screen" charset="utf-8" /> <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script> <!--获取中文首字母的函数，需要jQuery支持--> <script src="js/jquery.charfirst.pinyin.js" type="text/javascript"></script> <!--ListNav是一个用于创建按字母顺序分类导航的jQuery插件。--> <script src="js/jquery.listnav.min-2.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $('#myList').listnav({ includeOther: true, noMatchText: '没有内容', prefixes: ['the', 'a'] }); }) </script> </head> <body> <div id="noticeMSG"> <label>中文字母序：</label> </div> <br /> <!--显示字母序的层。注：此层id必需是ul的id+"-nav"--> <div id="myList-nav"> </div> <!-- 兼容IE6 加clear:both;--> <ul id="myList" style="clear:both;"> <li>京剧猫</li> <li>白糖</li> <li>武崧</li> <li>小青</li> <li>大飞</li> <li>班主婆婆</li> <li>唐明师傅</li> <li>荣光师兄</li> <li>明月</li> <li>海王星</li> <li>冥王星</li> <li>小黑</li> <li>黯</li> </ul> </body> </html>用到的两个JS插件地址：https://www.ihwy.com/Labs/jquery-listnav-plugin/ 和 https://www.npmjs.com/package/js-pinyin
附Gitee地址：https://gitee.com/xiuerjava/sort-chinese
