Активный класс Boostrap 4 Scroll Spy не изменился

Мой HTML:

<body data-spy = "scroll" data-target = ".dmu-top-nav" data-offset = "50">
  <header>
  <nav class = "navbar navbar-toggleable-sm navbar-expand-md dmu-top-nav fixed-top" role = "navigation">
  <div class = "container-fluid">
  <div class = "dmu-nav-wrapper">
  <div class = "navbar-header">
    <a class = "navbar-brand" href = "#home">
    <img src = "img/220px-Logo__lowres.png" width = "30" height = "30" alt = "logo">
    </a>
    <button class = "navbar-toggler" data-toggle = "collapse" data-target = "#dmu-nav-menu" aria-controls = "dmu-nav-menu" aria-expanded = "false" aria-label = "Toggle navigation">
    <span class = "icon-bar"></span>
    <span class = "icon-bar"></span>
    <span class = "icon-bar"></span>
    </button>
  </div>

В приведенном выше HTML-коде я даю логотип и значок для кнопки переключения. Я также даю расширенный класс и фиксированный высший класс, но это все равно не сработало. Моя цель данных уже верна, это .dmu-top-nav.

<div id = "dmu-nav-menu" class = "collapse navbar-collapse">
  <ul class = "nav navbar-nav">
    <li class = "nav-item active">
      <a class = "nav-link" href = "#home">Home</a>
    </li>
    <li class = "nav-item">
      <a class = "nav-link" href = "#about">About</a>
    </li>
    <li class = "nav-item">
      <a class = "nav-link" href = "#news">Upcoming</a>
    </li>
    <li class = "nav-item">
      <a class = "nav-link" href = "#staff">Lecture</a>
    </li>
    <li class = "nav-item">
      <a class = "nav-link" href = "#student">Alumni</a>
    </li>
  </ul>
....
</header>
....

Почему активный класс не хочет меняться? Во втором блоке кода есть разделы для href.

html css bootstrap-4

10.02.2019 15:33

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

311

Ответы 2

Привет? вы должны добавить немного CSS в свой файл таблицы стилей, вот код

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-scroller .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
}

.card-img-right {
  height: 100%;
  border-radius: 0 3px 3px 0;
}

.flex-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.h-250 { height: 250px; }
@media (min-width: 768px) {
  .h-md-250 { height: 250px; }
}

вот HTML-код

<div class = "nav-scroller py-1 mb-2">
    <nav class = "nav d-flex justify-content-between">
      <a class = "p-2 text-muted" href = "#">World</a>
      <a class = "p-2 text-muted" href = "#">U.S.</a>
      <a class = "p-2 text-muted" href = "#">Technology</a>
      <a class = "p-2 text-muted" href = "#">Design</a>
      <a class = "p-2 text-muted" href = "#">Culture</a>
      <a class = "p-2 text-muted" href = "#">Business</a>
      <a class = "p-2 text-muted" href = "#">Politics</a>
      <a class = "p-2 text-muted" href = "#">Opinion</a>
      <a class = "p-2 text-muted" href = "#">Science</a>
      <a class = "p-2 text-muted" href = "#">Health</a>
      <a class = "p-2 text-muted" href = "#">Style</a>
      <a class = "p-2 text-muted" href = "#">Travel</a>
    </nav>
  </div>

10.02.2019 15:44

О, теперь я получаю ответ, активный класс меняется на «а», но я не знаю, почему. Таким образом, «а» добавляет и удаляет активный класс.

я думаю, что активное изменение класса в «ли»

— 10.02.2019 15:47

10.02.2019 15:47