0

我的网址如下所示：

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/ 并突出显示该特定列表项？我也想用 casetudies << 这是不同的，因为它没有子目录。

我想用jquery？我想我需要解析网址？然后检查单词，然后在 li 中添加一个类或粗体？？

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

4

6 回答 6

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');
        }
    });
});
于 2012-04-25T16:46:05.163 回答
1

给每个菜单元素一个 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");
    });
}

​</p>

于 2012-04-25T16:46:11.730 回答
1

简单地：

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

请参阅jsFiddle 示例。

更新：

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

$('a[href*="'+window.location.href+'"]').css('color', 'red');
于 2012-04-25T16:49:16.947 回答
0 
<?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>

是的，这行得通

于 2012-04-25T16:43:29.957 回答
0

您不需要解析 URL，因为 href 应该匹配它（根据您的示例），所以这应该可以工作。

$('a[href=' + window.location.toString() +']').parents('ul').eq(0).addClass('highlight');
于 2012-04-25T16:44:01.333 回答
0

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

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

然后做你的造型：

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

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

于 2012-04-25T16:48:50.223 回答