URLが同じパスを持つメニューでクラスをアクティブにする方法

Question

私は次のメニューを持っています。

<ul id="nav" class="grid_16"> 
    <li><a href="#">FORSIDE</a></li> 
    <li><a href="#">MOBIL</a></li> 
    <li><a href="#">PC OG SERVERE</a></li> 
    <li><a href="#">TJENESTER</a></li> 
    <li><a href="#">DIVERSE</a></li> 
    <li><a href="#">OM OSS</a></li> 
    <li><a href="#">KONTAKT</a></li> 
    <li><a href="#">NETTBUTIKK</a></li> 

</ul> 

URLパスには空白があるところに_が入ります。 例えばPC OG SERVEREが

http://www.mywebsite.no/PC_OG_SERVERE.asp 

多様であるだろう、私はjQueryを使ってリストに= "アクティブ" クラスを追加したい

http://www.mywebsite.no/DIVERSE.asp 

になります。 たとえば、あなたが、私はそれを行うことができますどのようにhttp://www.mywebsite.no/OM_OSS.asp

..... 
..... 
<li class="active"><a href="#">OM OSS</a></li> 
.... 

にあるとき？

ありがとうございます。

Answer 1

：

var text = window.location.href.match(/http:\/\/www\.mywebsite\.no\/(.+)\.asp/)[1].replace(/_/g,' '); 
$("#nav li").filter(function() { 
    return $.text([this]) == text; 
}).addClass("active"); 

をので、（あなたはなど、正規表現を変更することができます...しかし、コンセプトは同じですが、テキストを取得し、各<li>のテキストにそれを比較します<a>は何も追加しません。<li>でそれを正しく実行できます）。あなたは上記のショートカットの代わりに.text()を使用する必要がありますjQueryののずっと古いバージョン、次のようにのために：

$("#nav li").filter(function() { 
    return $(this).text() == text; 
}).addClass("active"); 

注ここでは:contains()を使用してないなら、我々は完全一致をやっています、部分文字列の代わりに。

Answer 2

あなたは

$("#nav li a").each(
    function(){ 
    // Could be that you have to use $(this). Not sure. 
    if (this.text() == 'DIVERSE'){ 
     this.addClass('active'); 
    } 
    } 
); 

ような何かを試みることができる。しかし、私はサーバーサイドコードでこのクラスを生成する方が良いと思います。あなたはこのような何か行うことができます

Answer 3

var pathComponents = window.location.pathname.split("/"); 
var fileName = pathComponents[pathComponents.length - 1]; 
var documentName = fileName.substr(fileName.length - 4).replace("_", " "); 

$('#nav li a:contains(' + documentName +)').parent().addClass('active');