JavaScriptの location.href を使って、ヘッダーのメニューでURLが一致した要素にclass名を付けて、表示を切り替えます。
備忘録的な内容ですが、ぜひ参考にしてみてください。
location.href
JavaScriptの location.href は、現在のページURLを参照するプロパティです。
// 現在のURLを取得
const href = location.href;
// 指定URLに移動させる場合
location.href = 'http://www.yahoo.co.jp/';この記事では、location.href プロパティを使い、ページのURLによって実行する処理で表示を切り替えます。
一致した要素に下線が表示されるヘッダーのサンプル
早速サンプルです。
以下ヘッダーの「テスト2」の a タグに、この記事のURLを設定しています。
この記事を開いた時に、ページのURLを取得して、hrefに設定したURLが一致する「テスト2」に classの「current」が付与されて、黒い下線が表示されます。
実装の手順と方法
コードの解説の前に、実装の手順と方法について解説します。
まずはじめに、HTMLでコードを記述します。
<div class="headerBlock">
<a class="logo" href="#home">LOGO</a>
<ul class="navList">
<li><a href="#abc">テスト1</a></li>
<li><a href="https://dubdesign.net/javascript/header-current/">テスト2</a></li>
<li><a href="#def">テスト3</a></li>
<li><a href="#hij">テスト4</a></li>
</ul>
</div>今回のコードでは、サンプル用に div タグで擬似的に作っていますが、ヘッダーなら header タグで記述するようにしましょう。
次にJavaScriptを記述します。
コードは <body>〜</body>で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。
// 現在のURLを取得
const href = location.href;
// ヘッダーの中のaタグを全部取得
var links = document.querySelectorAll(".navList > li > a");
// ループでURLと一致したaタグに current を付ける。
for (var i = 0; i < links.length; i++) {
if (links[i].href == href) {
document.querySelectorAll(".navList > li")[i].classList.add("current");
}
}最後にCSSを記述して、見た目を整えましょう。
.headerBlock {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
padding: 0 20px;
}
.headerBlock a {
text-decoration: none;
transition: 0.3s ease-in-out;
}
.headerBlock a:hover, ul.navList li.current a {
color: #313131;
}
a.logo {
font-size: 1.4rem;
font-weight: 500;
letter-spacing: 0.08rem;
}
ul.navList {
margin: 0;
border: none;
list-style: none;
display: flex;
gap: 10px;
justify-content: flex-end;
padding: 0;
}
ul.navList li {
padding: 0;
position: relative;
}
ul.navList li:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
content: "";
transition: transform 0.3s ease-in-out;
transform: scale(0, 1);
transform-origin: left top;
background: #313131;
}
ul.navList li:hover:after, ul.navList li.current:after {
transform: scale(1, 1);
}
ul.navList li a {
height: 60px;
line-height: 60px;
padding: 0 5px;
display: inline-block;
}
これで完成です。
ざっくりとしたコードの解説
コードは、HTML・JavaScript・CSSの3種類です。順に解説していきます。
HTML
HTMLは「headerBlock」の要素に、a タグでロゴ。li のリストタグに各メニューにあたる a タグを入れています。
<div class="headerBlock">
<a class="logo" href="#home">LOGO</a>
<ul class="navList">
<li><a href="#abc">テスト1</a></li>
<li><a href="https://dubdesign.net/javascript/header-current/">テスト2</a></li>
<li><a href="#def">テスト3</a></li>
<li><a href="#hij">テスト4</a></li>
</ul>
</div>メニューのテスト2には、当記事のURLを絶対パスで記述しています。
JavaScript
JavaScriptは大きく分けて「現在のURLを取得」「メニューの a タグを取得」「ループで一致した a タグにclass名を付与」の3つです。
// 現在のURLを取得
const href = location.href;
// ヘッダーの中のaタグを全部取得
var links = document.querySelectorAll(".navList > li > a");
// ループでURLと一致したaタグに current を付ける。
for (var i = 0; i < links.length; i++) {
if (links[i].href == href) {
document.querySelectorAll(".navList > li")[i].classList.add("current");
}
}CSS
CSSは、flexboxでヘッダーのレイアウトを作り、「current」のclassがつく前と後の記述です。
.headerBlock {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
padding: 0 20px;
}
.headerBlock a {
text-decoration: none;
transition: 0.3s ease-in-out;
}
.headerBlock a:hover, ul.navList li.current a {
color: #313131;
}
a.logo {
font-size: 1.4rem;
font-weight: 500;
letter-spacing: 0.08rem;
}
ul.navList {
margin: 0;
border: none;
list-style: none;
display: flex;
gap: 10px;
justify-content: flex-end;
padding: 0;
}
ul.navList li {
padding: 0;
position: relative;
}
ul.navList li:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
content: "";
transition: transform 0.3s ease-in-out;
transform: scale(0, 1);
transform-origin: left top;
background: #313131;
}
ul.navList li:hover:after, ul.navList li.current:after {
transform: scale(1, 1);
}
ul.navList li a {
height: 60px;
line-height: 60px;
padding: 0 5px;
display: inline-block;
}下線は :after の擬似要素で作り、:hover で表示が切り替わる記述内容です、
さいごに
今回は、location.href でそのページのURLを取得して表示を切り替える内容でしたが、ページ遷移もコードで表現することができるので、参考にして色々試してみてください。
