0

私の URL は次のようになります。

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/ を探し、その特定のリスト アイテムを強調表示するにはどうすればよいですか? ケーススタディでもこれを行いたいと思います << サブディレクトリがないため、これは異なります。

jqueryを使いたいのですが？URLを解析する必要があると思いますか? 次に、単語を確認してから、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 がリンクの 1 つと一致するかどうかを知りたい場合は、次を使用します。

$('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

href が（例に基づいて）一致する必要があるため、URLを解析する必要はありません。これだけで機能するはずです。

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

/aboutus/ の下の任意のページを強調表示したい場合 - つまり、この 1 ページだけではなく複数のページがあり、about us メニュー項目を強調表示したい場合:

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 に答える