Question

我的网址如下：

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>

如何阅读网址并查找/ aboutus /并突出显示该特定列表项？我也想用casestudies＆lt;＆lt;这是不同的，因为它没有子目录。

我想使用jquery？我想我需要解析URL？然后检查单词然后在li ??

中添加一个类或粗体

编辑：我想知道浏览器中的URL是什么，它应该与jquery中的检查匹配，然后使li变为粗体或添加一个类。

Answer 1

这种方法没有太复杂：

$(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');
        }
    });
});

Answer 2

为每个菜单元素添加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>

使用这个jQuery：

$(function() {
    var currentPage = window.location.href.split("/")[4]);
    $(".sf-menu li")each(function() {
        if($(this).attr("href").indexOf(currentPage) > -1) $(this).addClass("highlight");
    });
}

Answer 3

简单地说：

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

请参阅jsFiddle Example。

<强>更新

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

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

Answer 4

<?php if ($_SERVER["SCRIPT_NAME"] == "/en-us/aboutus/abgroup.aspx") { //whatever } ?>

哦，你想要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>

是的，有效吗

Answer 5

您不需要解析网址，因为href应该与之匹配（根据您的示例），所以这应该可行。

$('a[href=' + window.location.toString() +']').parents('ul').eq(0).addClass('highlight');

Answer 6

如果你想突出显示/ aboutus /下的任何页面，也就是说，你没有这一页，只有几页，但是你确实想要关注我们菜单项：

if(window.location.indexOf('aboutus') != -1){
       $('.sf-menu a[href$="aboutus/abgroup.aspx"]).addClass('here');
 }

然后做你的造型：

.sf-menu .here { background: red; }

或者你想要的任何其他东西。

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

6 个答案: