bootstrapにおいてナビバーの.activeが作動しません。

現在bootstrapでナビバーを作っています。

ナビバーをfixed-topで上部に貼り付け、スクロールした際にセクション毎にナビバーのリンクの色を変えたいです。

例：home about contact とナビバーがある場合、aboutのセクションでナビバーのabout、contactのセクションではcontactの色のみを変えたいです。

また、.activeが作動しないことが原因なのですが理由がわかりません。

以下がコードです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>Bootstrap基本テンプレート</title>
  <!-- 必要なメタタグ -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="portfolio.css">
  </head>
  <body>
  <div id="home">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="home">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#1">111111111111</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#2">222222222222</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#3">333333333333</a>
      </li>
    </ul>
  </div>
</nav>
</div>

<section id="1">
  <h1>ddddddddddddd</h1>
</section>

<section id="2">
  <h1>ddddddddddddd</h1>
</section>

<section id="3">
  <h1>ddddddddddddd</h1>
</section>

    
  <!-- オプションのJavaScript -->
  <!-- 最初にjQuery、次にPopper.js、次にBootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

section{
	height: 800px;
	text-align: center;
	font-size: 20px;
	margin: 100px;
}

li{
	list-style: none;
	float: left;
	padding: 10px;
}

ul{

}
li a{
	color: #1ebba3;
}

.nav-item.active a{
	color: red;
}

行動規範の内容に同意します

回答1件

ベストアンサー

対応するセクションの id 属性を取得し、それを用いて a 要素に active クラスを適用することで、質問者さんの実現したいことが行なえると思います(動作確認用リンク)。

jQuery
1$(function() {
2  $(window).on("scroll", function() {
3    var entries = $("#home ~ section[id]"),
4      navbarHeight = $("#home > nav").outerHeight(),
5      intersectionEntry = entries
6        .map(function() {
7          var offsetY =
8            $(this).offset().top -
9            (parseInt($(this).css("marginTop")) + navbarHeight);
10          if (offsetY < $(window).scrollTop()) {
11            return this;
12          }
13        })
14        .last();
15
16    entries.each(function() {
17      var entryAnchor = $(
18        "#home .nav-link[href='#" + $(this).attr("id") + "']"
19      ).parent();
20
21      if (intersectionEntry.is(this)) {
22        entryAnchor.addClass("active");
23      } else {
24        $("#home .nav-link[href='#" + $(this).attr("id") + "']");
25        entryAnchor.removeClass("active");
26      }
27    });
28  });
29});
30

投稿2019/07/19 21:15

s8_chu

総合スコア14731

komatuna711

2019/07/20 05:23

回答ありがとうございます。 jQueryのソースを</body>の手前に貼り付けることで機能しました。しかし、他の<script>の前だと機能しないのは何故なのでしょうか？また、bootstrapには自分でjavascriptやjQueryのソースを書くことなく同じような機能を持たせることはできないのでしょうか？教えてください。よろしくお願いします。

s8_chu

2019/07/20 14:05

> しかし、他の<script>の前だと機能しないのは何故なのでしょうか？このコードが jQuery に依存しているためです。 > また、bootstrapには自分でjavascriptやjQueryのソースを書くことなく同じような機能を持たせることはできないのでしょうか？残念ながら、出来ません。細かいカスタマイズは自分自身で行なわなければなりません。

komatuna711

2019/07/21 04:40

ありがとうございました！これで謎がスッキリしました！

行動規範の内容に同意します