Q&A
問題の切り分けのため、HTMLも記載お願いします。
今のままだと、JS構文が原因なのか、
それとも、HTMLが原因なのかが判別しにくいです。
前提・実現したいこと
サイトのサイドメニューに現在位置をファイル名から取得して、
ハイライトさせております。
これをファイル名ではなく、その上のフォルダ名を取得して、
カテゴリとしてハイライトさせたいです。
（例）products/apple/xxxx.html
※いまは「xxxx.html」のxxxxを直接ファイル指定してハイライトさせているが、
フォルダの「apple」「orange」を各取得してそのフォルダ内のページは全てハイライトさせたい。
該当のソースコード
javascript
1$(function () { 2 var url = window.location; 3 var path = url.href.split('/'); 4 var file_name = path.pop(); 5 var class_name = file_name.split('.'); 6 $("." + class_name[0]).css('background-color', '#333'); 7 $("." + class_name[0]).css('color', '#fff'); 8})
html
1<div class="acMenu"> 2 <ul class="acmenu_list"> 3 <li> 4 <span class="trigger none-submenu">Products</span> 5 <ul class="submenu sm1"> 6 <li><a href="../products/apple/index.html">Apple</a> 7 <ul> 8 <li><a href="products/apple/item01.html">apple-01</a></li> 9 <li><a href="products/apple/item02.html">apple-02</a></li> 10 <li><a href="products/apple/item03.html">apple-03</a></li> 11 </ul> 12 </li> 13 <li><a href="../products/orange/index.html">Orange</a> 14 <ul> 15 <li><a href="products/orange/item01.html">orange-01</a></li> 16 <li><a href="products/orange/item02.html">orange-02</a></li> 17 </ul> 18 </li> 19 </ul> 20 </li> 21 <li> 22 <span class="trigger none-submenu">About</span> 23 <ul class="submenu sm2"> 24 <li><a href="about/01.html">about-01</a></li> 25 <li><a href="about/02.html">about-02</a></li> 26 </ul> 27 </li> 28 </ul> 29</div>
試したこと
ネット上のフォルダ名取得の書き方をいくつか入れてみましたが、
書き方が間違っているのかうまく動きません。
補足情報（FW/ツールのバージョンなど）
他に必要なソースが分らず、取り急ぎjsのみ記載しております。
コメントを頂いたのに遅くなり申し訳ございません。
下記htmlです。
<ul class="acmenu_list">
<li>
<span class="trigger none-submenu">Products</span>
<ul class="submenu sm1">
<li><a href="products/apple/index.html" class="apple">apple</a></li>
<li><a href="products/orange/index.html" class="orange">orange</a></li>
</ul>
</li>
</ul>
回答3件
0
ベストアンサー
href属性値に相対パスを使っているのなら、カレントURLによって相対値が変化する為、pathName 等の絶対値で比較するのが妥当と考えます。
※下記HTMLはおそらく、http://example.com/ 閲覧時のhref属性値ですが、http://example.com/products/apple/item01.html を閲覧しているのなら、href属性値からproducts/apple/が取り除かれるはずです。
保守的には絶対パスor絶対URI指定が楽に実装できますが、サーバ側でhref属性値を動的生成しているか、手動でhref属性値を入力しているのでしょう。
HTML
1<style> 2.current { 3 color: white; 4 background-color: #333; 5} 6</style> 7<body> 8 <ul class="acmenu_list"> 9 <li> 10 <span class="trigger none-submenu">Products</span> 11 <ul class="submenu sm1"> 12 <li><a href="products/apple/index.html" class="apple">apple</a> 13 <ul> 14 <li><a href="products/apple/item01.html">apple-01</a></li> 15 <li><a href="products/apple/item02.html">apple-02</a></li> 16 <li><a href="products/apple/item03.html">apple-03</a></li> 17 </ul> 18 </li> 19 <li><a href="products/orange/index.html" class="orange">orange</a> 20 <ul> 21 <li><a href="products/orange/item01.html">orange-01</a></li> 22 <li><a href="products/orange/item02.html">orange-02</a></li> 23 </ul> 24 </li> 25 </ul> 26 </li> 27</ul> 28 29<script> 30'use strict'; 31const dirPath = location.pathname.replace(/[^/]+$/, ''); 32 33for (let a of document.querySelectorAll('ul.acmenu_list a')) { 34 if (a.pathname.startsWith(dirPath)) { 35 a.classList.add('current'); 36 console.log(dirPath, a.pathname); 37 } 38} 39</script>
Re: sk.qa さん
投稿2021/05/10 05:59
総合スコア18166
think49さんのjsを入れ込んだら、やりたいことが実現されました！！本当にありがとうございます。
ただ、今度は（上記の更新したhtml）Aboutのページに行くと、全てがハイライトされるようになってしまいました…Appleは大丈夫なのですが。
削除
閲覧URL: http://example.com/products/about/01.html
リンク先URL: http://example.com/products/apple/index.html
ならハイライトされる理由は有りません。
相対パス指定をミスして
閲覧URL: http://example.com/products/about/01.html
リンク先URL: http://example.com/products/about/products/apple/index.html
ならハイライトされます。
href属性値のリンク先が正しいか再確認して下さい。
例えば、相対パスを手入力して file:/// スキームで確認していると計算をミスしがちです。
上記記載のaboutの記載を間違えておりました。申し訳ございません。
0
こういうことでしょうか。
JavaScript
1var url = "https://www.example.com/products/apple/xxxxx.html"; 2var path = url.split("/"); 3var file_name = path.pop(); // => xxxx.html 4var product = path.pop(); // => apple
投稿2021/05/10 05:04
総合スコア2573
有難うございます。html追記しました。
【var url = "https://www.example.com/products/apple/xxxxx.html";】
は、appleに限定ではなく、orange等他のフォルダの際にも取得したいです。
urlはあくまで例です。実際には
var url = window.location.href;
として実行してください。
あなたの回答
tips
プレビュー
