Fatal编程技术网
  • javascript/
  • Javascript 检查URL中的文本，然后使用jquery或js将类添加到li中

Javascript 检查URL中的文本，然后使用jquery或js将类添加到li中

javascript jquery css

Javascript 检查URL中的文本，然后使用jquery或js将类添加到li中,javascript,jquery,css,Javascript,Jquery,Css,我的URL如下所示： http://www.site.co.uk/en-us/aboutus/abgroup.aspx http://www.site.co.uk/en-us/casestudies.aspx 这是菜单HTML标记 <ul class="sf-menu"> <li class="first"><a href="http://www.site.co.uk/en-us/home.aspx">Home</a></li&g

我的URL如下所示：

http://www.site.co.uk/en-us/aboutus/abgroup.aspx

http://www.site.co.uk/en-us/casestudies.aspx
这是菜单HTML标记

<ul class="sf-menu">
    <li class="first"><a href="http://www.site.co.uk/en-us/home.aspx">Home</a></li>
    <li class=""><a href="http://www.site.co.uk/en-us/aboutus/abgroup.aspx">About Us</a></li>
    <li class=""><a href="http://www.site.co.uk/en-us/casestudies.aspx">Case Studies</a></li>
</ul>

    

  • 

  • 

  •
如何读取URL并查找/aboutus/并突出显示该特定列表项？ 我还想通过案例研究
哦，你想要js，这里：

<script style='text/javascript'>
function checkURL() {
    if(window.location == "http://www.site.co.uk/en-us/aboutus/home.aspx") {
    document.getElementById('home').style.background = "yellow";
    } else if (window.location == "http://www.site.co.uk/en-us/aboutus/abgroup.aspx") {
    document.getElementById('abgroup').style.background = "yellow";
    } else {
    document.getElementById('casestudies').style.background = "yellow";
    }
}
</script>
<body onload='checkURL()'>
<ul class="sf-menu">
  <li class="first" id='home'><a href="http://www.site.co.uk/en-us/home.aspx">Home</a></li>
  <li class="" id='abgroup'><a href="http://www.site.co.uk/en-us/aboutus/abgroup.aspx">About Us</a></li>
   <li class="" id='casestudies'><a href="http://www.site.co.uk/en-us/casestudies.aspx">Case Studies</a></li>
</ul>


函数checkURL（）{
如果（window.location==”http://www.site.co.uk/en-us/aboutus/home.aspx") {
document.getElementById（'home'）.style.background=“黄色”；
}else if（window.location==”http://www.site.co.uk/en-us/aboutus/abgroup.aspx") {
document.getElementById（'abgroup'）.style.background=“黄色”；
}否则{
document.getElementById（“案例研究”）.style.background=“黄色”；
}
}

    

  • 

  • 

  •
是的，这很有效
哦，你想要js，这里：

<script style='text/javascript'>
function checkURL() {
    if(window.location == "http://www.site.co.uk/en-us/aboutus/home.aspx") {
    document.getElementById('home').style.background = "yellow";
    } else if (window.location == "http://www.site.co.uk/en-us/aboutus/abgroup.aspx") {
    document.getElementById('abgroup').style.background = "yellow";
    } else {
    document.getElementById('casestudies').style.background = "yellow";
    }
}
</script>
<body onload='checkURL()'>
<ul class="sf-menu">
  <li class="first" id='home'><a href="http://www.site.co.uk/en-us/home.aspx">Home</a></li>
  <li class="" id='abgroup'><a href="http://www.site.co.uk/en-us/aboutus/abgroup.aspx">About Us</a></li>
   <li class="" id='casestudies'><a href="http://www.site.co.uk/en-us/casestudies.aspx">Case Studies</a></li>
</ul>


函数checkURL（）{
如果（window.location==”http://www.site.co.uk/en-us/aboutus/home.aspx") {
document.getElementById（'home'）.style.background=“黄色”；
}else if（window.location==”http://www.site.co.uk/en-us/aboutus/abgroup.aspx") {
document.getElementById（'abgroup'）.style.background=“黄色”；
}否则{
document.getElementById（“案例研究”）.style.background=“黄色”；
}
}

    

  • 

  • 

  •
是的，这是可行的

您不需要解析URL，因为href应该与之匹配（基于您的示例），所以这应该是可行的

$('a[href=' + window.location.toString() +']').parents('ul').eq(0).addClass('highlight');
您不需要解析URL，因为href应该与之匹配（基于您的示例），所以这应该是可行的

$('a[href=' + window.location.toString() +']').parents('ul').eq(0).addClass('highlight');
这种方法没有什么太复杂的地方：

$(document).ready(function() {
    $("ul.sf-menu li a").each(function() {
        if ($(this).attr('href').match(/aboutus/) && window.location.match(/aboutus/)) {
            $(this).parent().addClass('aboutus-highlight');
        }
        if ($(this).attr('href').match(/casestudies/) && window.location.match(/casestudies/)) {
            $(this).parent().addClass('casestudies-highlight');
        }
    });
});
这种方法没有什么太复杂的地方：

$(document).ready(function() {
    $("ul.sf-menu li a").each(function() {
        if ($(this).attr('href').match(/aboutus/) && window.location.match(/aboutus/)) {
            $(this).parent().addClass('aboutus-highlight');
        }
        if ($(this).attr('href').match(/casestudies/) && window.location.match(/casestudies/)) {
            $(this).parent().addClass('casestudies-highlight');
        }
    });
});
为每个菜单元素指定一个ID：

<ul class="sf-menu">
    <li class="first" id="home"><a href="http://www.site.co.uk/en-us/home.aspx">Home</a></li>
    <li class="" id="aboutus"><a href="http://www.site.co.uk/en-us/aboutus/abgroup.aspx">About Us</a></li>
    <li class="" id="casestudies"><a href="http://www.site.co.uk/en-us/casestudies.aspx">Case Studies</a></li>
</ul>
​

为每个菜单元素指定一个ID:

<ul class="sf-menu">
    <li class="first" id="home"><a href="http://www.site.co.uk/en-us/home.aspx">Home</a></li>
    <li class="" id="aboutus"><a href="http://www.site.co.uk/en-us/aboutus/abgroup.aspx">About Us</a></li>
    <li class="" id="casestudies"><a href="http://www.site.co.uk/en-us/casestudies.aspx">Case Studies</a></li>
</ul>
​

如果您想突出显示/aboutus/-下的任何页面，也就是说，您不仅有这一页，还有几页，但您确实希望突出显示“关于我们”菜单项：

if(window.location.indexOf('aboutus') != -1){
       $('.sf-menu a[href$="aboutus/abgroup.aspx"]).addClass('here');
 }
然后做你的造型：

.sf-menu .here { background: red; }
或者您想要的任何其他页面。

如果您想突出显示/aboutus/下的任何页面-也就是说，您不仅有这一页，还有几页，但您确实希望突出显示“关于我们”菜单项：

if(window.location.indexOf('aboutus') != -1){
       $('.sf-menu a[href$="aboutus/abgroup.aspx"]).addClass('here');
 }
然后做你的造型：

.sf-menu .here { background: red; }
或者你想要的任何东西。

简单地说：

$('a[href*="/aboutus/"]').css('color', 'red');
看

更新：

如果您想知道浏览器中的当前URL是否与其中一个链接匹配，请使用以下选项：

$('a[href*="'+window.location.href+'"]').css('color', 'red');
简单地说：

$('a[href*="/aboutus/"]').css('color', 'red');
看

更新：

如果您想知道浏览器中的当前URL是否与其中一个链接匹配，请使用以下选项：

$('a[href*="'+window.location.href+'"]').css('color', 'red');
听起来这个答案符合你的要求-不，这不是我想要的，当你在DNN中禁用一个页面时，它会将LI从菜单中移除，这样代码就永远不会知道它是否在父项中。听起来这个答案符合你的要求-不，这不是我想要的，当您在DNN中禁用一个页面时，它会将LI从菜单中移除，这样代码就永远不会知道它是否在父级中。这是一个javascript问题而不是php问题这是一个javascript问题而不是php问题您可能希望使用以下if语句：
if（This.attr（'href'）.match（/window.location.href.split（“/”[4]/）{
嗯……我想他只是想突出显示“aboutus”链接。我不知道他说的是动态链接。我可能错了。他有三种可能性，他想突出显示菜单上当前的可能性。如果他不想动态，他会手动添加“突出显示”类在他的样式表中…@ElliotBonneville，我认为你是对的。我有时会忙于回答海报提出的问题，而不是他想问的问题！哦，好吧。有两个场景，/aboutus/和casestudies.aspx，我需要能够从URL中读取单词并将其与li a匹配，然后添加你可能想要的类s if语句：
if（this.attr（'href'）.match（/window.location.href.split（“/”[4]/）{
Hmm…我想他只是想突出显示“aboutus”链接。我不知道他说的是动态的。我可能错了。嗯，他有三种可能性，他想在菜单上突出显示当前的可能性。如果他不想动态，他会手动添加“突出显示”类在他的样式表中…@ElliotBonneville，我认为你是对的。我有时会忙于回答海报提出的问题，而不是他想问的问题！哦，好吧。有两个场景，/aboutus/和casestudies.aspx，我需要能够从URL中读取单词并将其与li a匹配，然后添加类号，但我已经隐藏了例如，页面
http://www.site.co.uk/en-us/aboutus/test.aspx
不会出现在菜单中，但我希望顶部的列表项“关于我们”有突出显示的类。啊，很公平，那么就抓住第一个父类（假设UL上的类足够好，但您的想法就在DOM上）.我更新了我的帖子。没有，但我有隐藏页面，例如
http://www.site.co.uk/en-us/aboutus/test.aspx
不会出现在菜单中，但我希望顶部列表中的“关于我们”项目具有突出显示类。啊，很公平，只要抓取第一个父项即可（假设UL上的类已经足够好了，但是你得到的想法只是横穿DOM）。我更新了我的帖子。这可以用来检查li中的a标记。但是我想要一种方法来检查窗口中的URL…？看，它不起作用，它看起来对我来说很好，“关于我们”和“案例研究”橙色。啊，你想知道浏览器中的当前URL是否与其中一个链接匹配？！？？？然后请更新你的问题…这似乎有效..哇，也很简单..但是当我点击这样的URL时：