Question

我在这里有一些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匹配，然后将其设为粗体。

点击菜单项时，其网址为www.website.co.uk/aboutus/abgroup.apx

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

任何想法。

如果网址末尾包含.co.uk，那么在页面加载时我需要类似的内容，然后将主页li a设为粗体。

MENU MARKUP：

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

这是一个2部分问题，

1）当网址只是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>

Answer 1

使用此插件JAMES PADOLSEY regex selector for JQuery

并像这样使用：

var regexp_part = /\w+\.aspx$/.exec(window.location.href)[0];
if (regexp_part != null) {
    $('a:regex(href, ' + regexp_part[0] +'$)').css('font-weight', 'bold');
}

Answer 2

解决第一部分很简单

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

在<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');

jquery比较href + url和'contains'问题

2 个答案: