Title: ナビゲーションをカレント表示する方法
Last modified: 2021年8月13日

---

# ナビゲーションをカレント表示する方法

 *  解決済 [chatm](https://ja.wordpress.org/support/users/chatm/)
 * (@chatm)
 * [5年、 1ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e3%82%ab%e3%83%ac%e3%83%b3%e3%83%88%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/)
 * サイドメニューをcategory-temp.phpに入れてレイアウトしていますが、
    ナビゲーション
   をカレント表示する方法としてjsを設定しています。
 * しかし、子カテゴリーまではちゃんとカレント表示できるのですが、
    孫カテゴリーでは、
   子カテゴリー全部がアクティブ表示になってしまいます。 jsの条件分岐で、孫カテゴリー
   の現在表示しているページだけカレント表示したいのですが 何か良い方法があれば教え
   て下さい。
 * js
 *     ```
       // サイドメニュー　css「.current」がアクティブ設定
       $(function(){
       	$(".side .category li a").each(function(){
       		if(this.href == location.href) {
       			$(this).parents("li").addClass("current");
       		}
       	});
       });
       ```
   
 * html
 *     ```
       <aside class="side">
   
           <div class="category">
   
           <ul>
           <li><a href="#">子ページ</a></li>
           <li><a href="#">子ページ</a></li>
           <li>子ページ
           <ul>
           <li><a href="#">孫ページ</a></li>
           <li><a href="#">孫ページ</a></li>
           <li><a href="#">孫ページ</a></li>
           </ul>
       	</li>
           <li><a href="#">子ページ</a></li>
           </ul>
           </div><!-- /category -->
       </aside>
       ```
   
 *     ```
       css
       ```
   
 * /* activ / カレント表示 */
    .side .category li.current a{background-color: #EEE;}.
   side .category li.current a:after{ border-top: 1px solid #EC1A0F; border-right:
   1px solid #EC1A0F;}`

2件の返信を表示中 - 1 - 2件目 (全2件中)

 *  [ishitaka](https://ja.wordpress.org/support/users/ishitaka/)
 * (@ishitaka)
 * [5年、 1ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e3%82%ab%e3%83%ac%e3%83%b3%e3%83%88%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/#post-11673714)
 * こんにちは
 * > jsの条件分岐で、孫カテゴリーの現在表示しているページだけカレント表示したいの
   > ですが
 * js はそのままでいいのではないでしょうか？
    CSS を下記のように変更するのはどう
   でしょうか。
 *     ```
       .side .category li.current a {}
       .side .category li.current a:after {}
       ```
   
 * ↓
 *     ```
       .side .category li.current > a {}
       .side .category li.current > a:after {}
       ```
   
 *  トピック投稿者 [chatm](https://ja.wordpress.org/support/users/chatm/)
 * (@chatm)
 * [5年、 1ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e3%82%ab%e3%83%ac%e3%83%b3%e3%83%88%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/#post-11673716)
 * なんてことでしょう！できました。魔法のようですね。
    こんな単純な事だったなんて・・・
   教えていただきまして本当にありがとうございます！

2件の返信を表示中 - 1 - 2件目 (全2件中)

 トピック「ナビゲーションをカレント表示する方法」には新たに返信することはできません。

## タグ

 * [カレント](https://ja.wordpress.org/support/topic-tag/%e3%82%ab%e3%83%ac%e3%83%b3%e3%83%88/)
 * [サイドバー](https://ja.wordpress.org/support/topic-tag/%e3%82%b5%e3%82%a4%e3%83%89%e3%83%90%e3%83%bc/)

 * フォーラム: [使い方全般](https://ja.wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 2件の返信
 * 2人の参加者
 * 最後の返信者: [chatm](https://ja.wordpress.org/support/users/chatm/)
 * 最後の活動: [5年、 1ヶ月前](https://ja.wordpress.org/support/topic/%e3%83%8a%e3%83%93%e3%82%b2%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%82%92%e3%82%ab%e3%83%ac%e3%83%b3%e3%83%88%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95/#post-11673716)
 * 状態: 解決済

## トピック

### 人気のトピック

### 返信がないトピック

### サポート関連ではないトピック

### 解決済みのトピック

### 未解決のトピック

### すべてのトピック