使用 jquery 切換 Bootstrap 活動導航鏈接

Question

我正在嘗試合並 jquery function 以自動更改我的 Bootsrap nav鏈接的活動狀態。 我有一個基本 HTML 文件，該文件擴展為特定於應用程序的基本文件。 然后將該文件擴展到由navbar導航的各個頁面。

這是特定於應用程序的 HTML：

{% extends "base.html" %}
{% load static %}

{% block css %}
  <link rel="stylesheet" href="{% static 'home/main.css' %}">
{% endblock css %}

{% block js %}
  <script>
    $(function() {
       $("#home-navs").click(function() {
          // remove classes from all
          $("#home-navs").removeClass("active");
          // add class to the one we clicked
          $(this).addClass("active");
       });
    });

  </script>
{% endblock js %}

{% block content %}
  <br>

  <div class="container status-update">
    <div class="container">
      <form>
        <div class="input-group-lg">
          <input type="text" class="form-control" value="What's new?">
        </div>
        <br style="height:20px">
        <button type="submit" class="btn btn-primary btn-lg" name="button">Post</button>
      </form>
    </div>
  </div>

  <br>

  <div class="container">
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #6298bf">
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <div class="navbar-nav">
          <a class="nav-link active" id="home-navs" href="{% url 'home' %}">Activity Feed</a>
          <a class="nav-link" id="home-navs" href="{% url 'vehicle-updates' %}">Vehicle Updates</a>
          <a class="nav-link" id="home-navs" href="/space.html">Garage Updates</a>
        </div>
      </div>
    </nav>
  </div>

然后我在我的主要base.html文件的頭部有這個：

{% load static %}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <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.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    {% block css %}{% endblock css %}



    <script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
    <script src="{% static 'js/jquery.waypoints.min.js' %}"></script>
    <script src="{% static 'js/infinite.min.js' %}"></script>
    {% block js %}{% endblock js %}


    <title>Test</title>
  </head>

頁面和鏈接工作得很好，當我點擊不同的鏈接時，我無法讓navbar上的active狀態發生變化。 我不知道我是否引用了 function 中的項目錯誤，或者什么。 任何指導將不勝感激。 謝謝！

Answer 1

您不能將 id 用於多個 dom 元素。 改用類。

嘗試將其更改為：

  $(".nav-link").click(function() {
      // remove classes from all
      $(".nav-link").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });

如果你想 scope 它只將特定導航的元素放入導航本身，然后使用選擇器： $("#main-nav.nav-link")

使用 jquery 切換 Bootstrap 活動導航鏈接

問題描述

1 個解決方案

解決方案1
1 2020-05-25 07:38:56

使用 jquery 切換 Bootstrap 活動導航鏈接

問題描述

1 個解決方案

解決方案1 1 2020-05-25 07:38:56

解決方案1
1 2020-05-25 07:38:56