2010-12-02 14 views
1

私は次のメニューを持っています。URLが同じパスを持つメニューでクラスをアクティブにする方法

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

にあるとき?

ありがとうございます。

答えて

4

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()を使用してないなら、我々は完全一致をやっています、部分文字列の代わりに。

+1

私はあなたが嫌い​​です。これらの日のうちの1つは、私はあなたに答えを打つことができるでしょう! –

+1

@アロン - 私は午後11時から午前4時まで数時間寝ます; –

+0

@ニック - ハハ! –

0

あなた

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

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

+0

実際に '$(this)'を使う必要があります。これは 'this'はこれらのメソッドを持たないDOM要素を参照するからです。 –

0
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'); 
+0

ここで ':contains()'は部分文字列にマッチするので、ここでは使用しないでください。 –

+0

はい、偽陽性の可能性があります。しかし、上に掲載されたものがリスト全体であれば、それは懸念事項ではありません。 –

関連する問題