1

我在这里有一些jquery：

    $(document).ready(function () {
        $('a[href*="' + window.location.href + '"]').css('font-weight', 'bold');

        //check that the text exists in the div and make top menu item bold
        $("ul#menu2 div:contains('About Us')");
        {
            $("ul.sf-menu li a:contains('About Us')").css('font-weight', 'bold');
        }
   });

问题是页面加载 URL 除了 www.website.co.uk 之外什么都没有。代码将 url 与菜单中的 href 匹配，然后使其变为粗体。

当您单击菜单项时，它会很好，因为 URL 显示 www.website.co.uk/aboutus/abgroup.apx

jquery 的第二部分在其中一个页面的左侧菜单中检查一个单词，然后将样式添加到也匹配该字符串的顶部菜单中。但它似乎使所有顶部菜单项都变粗了。

有任何想法吗。

我需要类似的东西，如果 URL 最后包含 .co.uk 则在页面加载时将主页设为li a粗体。

菜单标记：

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

这是一个两部分的问题，

1）当url只是www.website.co.uk时，我需要停止jquery，因为它在与href和url进行比较时失败了。

2）需要知道为什么在某些页面上包含一直突出显示（这可能是因为我不够具体，我使用ID来检查但顶部菜单不是。）

这是我的“关于我们”菜单：（ 我也有服务和部门，同样的原则适用 - 我想从菜单中搜索 div 并使顶部相应的菜单项加粗。

<ul id="menu2">
    <div>About Us<br>
    </div>
    <li><a href="/en-us/aboutus/ABgroup.aspx" class="current">A&amp;B Group</a></li>
    <li style="padding-left: 10px;"><a href="/en-us/aboutus/csr.aspx">CSR</a></li>
    <li style="padding-left: 10px;"><a href="/en-us/aboutus/csr/sustainability.aspx">Sustainability</a></li>
    <li style="padding-left: 10px;"><a href="/en-us/aboutus/csr/healthsafety.aspx">Health &amp; Safety</a></li>
    <li><a href="/aboutus/ab/aluminiumsheets.aspx">Aluminium Sheets</a></li>
    <li><a href="/aboutus/ab/test.aspx">Test</a></li>
    <li><a href="/aboutus/ab/cars.aspx">Cars</a></li>
    <li><a href="/aboutus/ab/houseinteriors.aspx">House Interiors </a></li>
    <li><a href="/aboutus/ab/abreports.aspx">A&amp;B reports</a></li>
</ul>
4

2 回答 2

1

为 JQuery使用这个插件JAMES PADOLSEY 正则表达式选择器

并像这样使用：

var regexp_part = /\w+\.aspx$/.exec(window.location.href)[0];
if (regexp_part != null) {
    $('a:regex(href, ' + regexp_part[0] +'$)').css('font-weight', 'bold');
}
于 2012-04-26T09:42:33.700 回答
1

解决第一部分很简单

var pattern = new RegExp('http(s?):\/\/(?:[\w-]+\.)?testsite\.co\.uk(/?)$');
if(pattern.test(window.location.href)) {
    $('.first').css('font-weight', 'bold');
} else {
    $('a[href*="' + window.location.href + '"]').css('font-weight', 'bold');
}

在 a中以 a<div>作为根元素<ul>是无效的。如果这是一个标题，我会建议使用标题标签并将其放在<ul>. 像这样的东西：

<h2>About Us</h2>
<ul> .... </ul>

然后你可以为javascript做一些简单的事情：

var title = $('h2').text();
if(title !== '') $("ul.sf-menu li a:contains('" + title + "')").css('font-weight', 'bold');
于 2012-04-26T09:58:16.830 回答