修改正则表达式以突出显示当前菜单项
Posted
技术标签:
【中文标题】修改正则表达式以突出显示当前菜单项【英文标题】:Modify regular expression to highlight current menu item 【发布时间】:2013-05-19 18:36:00 【问题描述】:我有这个 jQuery 正则表达式,它是从 *** 的另一个线程得到的。它根据 url 向当前菜单项添加一个 css 类。它看起来像这样:
<script>
$(function ()
// show current menu object highlighted
var url = window.location.pathname,
urlRegExp = new RegExp(url == '/' ? window.location.origin + '/?$' : url.replace(/\/$/, '')); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
// now grab every link from the navigation
$('nav a').each(function ()
// and test its href against the url pathname regexp
if (urlRegExp.test(this.href))
$(this).addClass('current');
console.log(url);
console.log($(this).attr('href'));
);
);
</script>
如果路径与链接 href 中的路径完全相同,这将非常有用,但我希望这也适用于当前菜单对象的子页面。这是我的导航:
<nav>
<ul>
<li>
<a href="/Admin/Blogs" title="Blog" style="border-left: 1px solid rgba(0,0,0,.15);">Blog</a>
</li><li>
<a href="/Admin/Shows" title="Shows">Shows</a>
</li><li>
<a href="/Admin/StoreItems" title="Store">Store</a>
</li><li>
<a href="/Admin/Pages" title="Pages">Pages</a>
</li><li>
<a href="/Admin/Menu" title="Menu">Menu</a>
</li><li>
<a href="/Admin/SocialMedia" title="Social media">Social media</a>
</li><li>
<a href="/Admin/ImageGallery" title="Image gallery">Image gallery</a>
</li><li>
<a href="/Admin/MailSettings" title="Mail settings">Mail settings</a>
</li><li>
<a href="/Admin/PageSettings" title="Site configuration">Site configuration</a>
</li>
</ul>
</nav>
假设路径是 /Admin/Blogs/Create,我希望突出显示“博客”菜单项。目前情况并非如此。 此外,如果我转到 /Admin(即主页),此时所有菜单项都被选中,这是不可取的。
有一天我真的需要花时间正确学习正则表达式,但我对这个(学校项目)有点着急,所以如果有人能帮助我,我将不胜感激。
【问题讨论】:
学校项目?对于这种情况,您可以使用子字符串或字符串匹配来代替正则表达式。或两者的组合以简化reg exp。开始 ^ 符号将对您的情况有所帮助。 感谢您的提示!我会努力解决的。 【参考方案1】:我让它与这段代码一起工作:
<script>
$(function ()
// show current menu object highlighted
var url = window.location.pathname;
var checkString;
// now grab every link from the navigation
$('nav a').each(function ()
// and test its href against the url pathname
checkString = url.match($(this).attr('href'));
if ((checkString != null && $(this).attr('href') != '/') || (url == $(this).attr('href')))
$(this).addClass('current');
);
);
</script>
【讨论】:
【参考方案2】:我能够让它与 Mikael 的代码一起使用,但它不会使链接在子页面上保持活动状态。我让它与下面的代码一起工作。必须编码匹配以使链接处于活动状态的 href 和 url 中的单词,但它对我有用,因为“消费者”是文件夹名称,所有子页面都将是 /consumer/page.html
$(function ()
// show current menu object highlighted
var url = window.location.pathname;
var checkString;
// keeps the link active on sub pages, 'consumer' is the folder in this instance and all sub pages with be /consumer/page.html
if (url.indexOf("consumer") != -1)
$('#quick-links a').each(function()
if( $(this).attr('href').indexOf("consumer") != -1)
$(this).parent('li').addClass('active');
);
// now grab every link from the navigation
$('#quick-links a').each(function ()
// and test its href against the url pathname
checkString = url.match($(this).attr('href'));
if ((checkString != null && $(this).attr('href') != '/') || (url == $(this).attr('href')))
$(this).parent().addClass('active');
);
);
【讨论】:
以上是关于修改正则表达式以突出显示当前菜单项的主要内容,如果未能解决你的问题,请参考以下文章
突出显示方括号内的文本(正则表达式?)Android kotlin