1

私は現在、次のような CSS を介して LI here 状態を設定しています。

body.className li.className {styles for here state}

ただし、新しいページを追加するたびに CSS ファイルに新しいルールを追加する必要がないようにしたいと考えています。代わりに、JS を使用して [body.class が LI.class に = の場合、同じ LI.class に "here" のクラスを追加します。

誰かがこのロジックを支援できますか?

4

2 に答える 2

0

これは、body 要素にクラス名が 1 つしかない場合に行う必要があります。

var bodyClass = $(body).attr("class");
$("li").is("."+bodyClass).addClass("here");
于 2012-11-04T04:35:24.300 に答える
0

メニューボタンに「アクティブ」クラスを設定するためにこのテクニックを試していると思います。

これはもちろん Javascript で行うことができますが、それが最善の方法であるとは思えません。

JavaScript の例: (jQuery の助けを借りて)

$(function() {
    var bodyId = $('body').attr('id');
    $('#menu li')            // find li tags in the menu list
        .removeClass('here') // remove previous occurance of 'here'
        .find('li.'+ bodyId) // find li with className equals to the body's 'id'
        .addClass('here');   // add the 'here' class to that Li tag.
});

私がしたことの1つは、本体を使用しidてLIのクラスとしても存在するかどうかを確認し、「here」クラスを追加することでした。(idボディに複数のクラスが存在する可能性があるため、を使用しました。その場合、どのクラスかを知ることは不可能です。)

可能なより良い方法: どうやら現在のページを タグに として既に書いているclassようですbody(これはサーバー側のコードを介して自動的に行われると思いますか? php? asp? java?...) それを書くことができれば、追加することができますメニューの論理テストも同様です。

たとえば、メニュー項目をループする場所では、その特定のメニュー項目が要求されている現在のページと同じかどうかをテストできます。次に、hereクラスをliに出力します。そして、あなたのcssだけが必要です li.here { /* current page styles */ }

于 2012-11-04T04:40:12.420 に答える