解决scrollspy无法跟踪中文标签id的问题。
Twitter-Bootstrap有一个名为scrollspy的脚本,顾名思义就是可以帧测页面的滚动,然后自动更新导航条的状态。见下面这个实例(请自动忽略最上面JS Bin的工具条):
当页面滚动时,导航条里相应的元素 @fat 和 @Dropdown 会被激活,根据这个视觉效果可以很直观的了解你现在阅读的进度。
仔细观察我标为红色的 @mdo 元素,为什么它始终没有被激活呢?如果观察它的HTML文件(点击JSBIN面板的HTML按钮),你会发现我把 @mdo 的标签 id 设成了中文艾姆迪欧
。而 scrollspy 居然不支持中文标签 id!
为什么 scrollspy 不能支持中文的 id 呢?仔细阅读 scrollspy 的源代码,你可以在第61行 处发现端倪—— scrollspy 在查找正文中与标签id匹配的标题时,使用了一个正则表达式:
1 | var $href = /^#\w/.test(href) && $(href) |
其中,\w
是一个javascript的元字符,可以匹配英文字符,却无法匹配中文字符。
知道了这点就可以通过修改这个正则表达式让其支持中文字符。将该行改写为:
1 | var $href = /^#./.test(href) && $(href) |
保存后刷新一下页面,看看这时候是不是就可以滚动跟踪这些页面了呢?我的wiki左侧的导航菜单就采用了修改后的scrollspy来进行滚动侦测,例如这个页面。