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 の 2 番目の部分は、ページの 1 つの左側のメニューにある単語をチェックし、その文字列にも一致するスタイルをトップ メニューに追加します。しかし、すべてのトップメニュー項目を太字にしているようです.

何か案は。

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>

これは 2 部構成の質問です。

1) URL が www.website.co.uk の場合、href と url との比較で失敗するため、すべてを太字にする jquery を停止する必要があります。

2)一部のページでコンテンツが常に強調表示されている理由を知る必要があります (これは、ID を使用して確認しているのに、トップ メニューが表示されていないため、具体的な情報が不足している可能性があります。)

これは私の「About Us」メニューです: (サービスとセクターもあり、同じ原則が適用されます。メニューから 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

このプラグインJAMES PADOLSEY 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');
}
于 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');
}

<div>a のルート要素として aを持つこと<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 に答える