diary

diary

サイト内に特定のclassが存在する時、別の特定のclassに新たにclassを付与する

なんだかややこしいタイトルですが、要は、サイトの項目を非表示にした時、メニューも非表示にしたい!みたいな時に使えるような感じです。

javascriptをfooterに書き込み、cssで調整する、ちょっと雑な感じなので
全然、もっといい方法があるはずですが、こんな方法でもできたよ的な感じで・・・

下のエリアにアンカーで飛ぶメニューのliのclassがこんな感じで

<li class="menu-item-10">

サイト内にこんな感じのエリアがあったとする

<section class="text-area">

重要なのはどちらもユニークであること。

こんな感じのscriptをフッターに追加

<script>
if($('.text-area').length) { //.text-areaってクラスが存在する場合
$('.menu-item-10').addClass('displayOn'); //.menu-item-10ってクラスのとこに、displayOnってクラスも追加する
}
</script>

サイト内に<section class=”text-area”>のエリアが存在する場合、特定のメニューにクラスが追加された。

<li class="menu-item-10 displayOn">

サイト内に<section class=”text-area”>のエリアが非表示になると、displayOnは消える。
あとはcssでちょいちょいやれば、エリアが非表示の時はメニューが非表示、エリアが表示の時は、メニューも表示。みたいなことができる。

Follow me!

contact

お見積 と ご相談

お見積 と ご相談

まずは、ご相談いただいた内容を元に、概算をお見積いたします。

お見積&ご相談は無料ですので、お気軽にお問合せください!

新規制作 リニューアル その他
デザインやインパクト 費用 更新方法 その他
今のホームページのURLや、理想とするホームページのURL
PAGE TOP