Jquery 修改正则表达式以突出显示当前菜单项

Jquery 修改正则表达式以突出显示当前菜单项,jquery,regex,Jquery,Regex,我从stackoverflow的另一个线程得到了这个jQuery正则表达式。它根据url向当前菜单项添加css类。看起来是这样的: <script> $(function () { // show current menu object highlighted var url = window.location.pathname, urlRegExp = new R

我从stackoverflow的另一个线程得到了这个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>

$(函数(){
//突出显示当前菜单对象
var url=window.location.pathname,
urlRegExp=new RegExp(url='/'?window.location.origin+'/?$':url.replace(/\/$/,'');//创建RegExp以匹配当前url路径名并删除尾部斜杠(如果存在),因为如果没有尾部斜杠,则可能会与导航中的链接冲突
//现在抓取导航中的每个链接
$('nav a')。每个(函数(){
//并根据url路径名regexp测试其href
if(urlRegExp.test(this.href)){
$(this.addClass('current');
}
console.log(url);
console.log($(this.attr('href'));
});
});
如果路径与link 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,我希望突出显示Blog菜单项。目前情况并非如此。 此外,如果我转到/Admin(即主页),此时所有菜单项都被选中,这是不可取的


有一天我真的需要花点时间来正确地学习正则表达式,但我现在有点忙,所以如果有人能帮我的话,我将不胜感激。

我用这段代码得到了它:

<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>

$(函数(){
//突出显示当前菜单对象
var url=window.location.pathname;
var校验字符串;
//现在抓取导航中的每个链接
$('nav a')。每个(函数(){
//并根据url路径名测试其href
checkString=url.match($(this.attr('href'));
if((checkString!=null&&$(this.attr('href')!='/'))| |(url=$(this.attr('href'))){
$(this.addClass('current');
}
});
});

我能够让它与Mikael的代码一起工作,但它无法在子页面上保持链接处于活动状态。我用下面的代码得到了它。href&url中匹配链接处于活动状态的单词必须进行编码,但它对我有效,因为“consumer”是文件夹名称,所有子页面都将是/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');
           }
       });

   });

学校项目?对于这种情况,可以使用子字符串或字符串匹配而不是正则表达式。或者两者结合使用以简化reg exp。Start^符号将对您的情况有所帮助。谢谢您的提示!我会尽力解决的。