«активные» кнопки начальной загрузки не работают должным образом

Я работаю над этим сайтом здесь:

https://shmoss.github.io/Gibbs-Lab/index.html

Как видите, у меня есть навигационная панель с кнопками для навигации. Обычно я устанавливаю все кнопки как ссылки для перехода на разные страницы, но чтобы продемонстрировать проблему, с которой я столкнулся, все они настроены на переход на домашнюю страницу (index.html).

Проблема в том, что при нажатии кнопки, отличной от «о», зеленая подсветка не выделяет кнопку как «активную». Когда вы нажимаете кнопку, я хочу, чтобы она получила «активный» класс и имела зеленую рамку. В настоящее время выбор другой кнопки ничего не дает.

HTML:

<div class="collapse navbar-collapse text-left" id="navbarNav">
      <ul id = "navPills" class=" nav-pills navbar-nav ml-auto">    
          <li>
            <a href="index.html" id="aboutPill" class="btn btn-s-md btn-white m-b active">ABOUT
            </a>
          </li>
          <li>
            <a href="index.html" id="peoplePill" class="btn btn-s-md btn-white m-b">
              PEOPLE
            </a>
          </li>
          <li>
            <a href="index.html" id="researchPill" class="btn btn-s-md btn-white m-b">RESEARCH
            </a>
          </li>
          <li>
            <a href="index.html" id="publicationsPill" class="btn btn-s-md btn-white m-b">PUBLICATIONS
            </a>
          </li>
          <li>
             <a href="index.html" id="mediaPill" class="btn btn-s-md btn-white m-b">
            MEDIA
            </a>
          </li>
          <li>
             <a href="index.html" id="teachingPill" class="btn btn-s-md btn-white m-b">
            TEACHING
            </a>
          </li>
          
      </ul> 
    </div>

CSS:

.btn {
  background-color:#f7f7f7 !important;
  color:#0c2d1c;
  border:none;
}

.btn.active{
 background-color:#0c2d1c !important;
  color:#f7f7f7 !important;
  box-shadow:none !important;
}

.btn:hover{
  background-color:#0c2d1c !important;
  color:#f7f7f7 !important;
  box-shadow:none !important;
}

.btn:focus{
  background-color:#0c2d1c !important;
  color:#f7f7f7 !important;
  box-shadow:none !important;

}

JS:

// .btn is the class of the element you want to change color

var $btns = $('.btn').click(function() {
  $btns.removeClass('active');
  $(this).addClass('active');
})

Спасибо.

Вам нужен JS для обработки состояний, это не что-то волшебное, что происходит само по себе. Также ваш HTML недействителен, идентификатор не может быть назначен более чем одному элементу

cloned 09.04.2022 23:13

извините, отредактировал, публикую js сейчас.

DiamondJoe12 09.04.2022 23:23
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
2
21
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Попробуй это.

$(function(){
    var current = location.pathname;
    $('.navbar-collapse ul li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
    })
})

Я думаю, это сработало! Не могли бы вы объяснить пару вещей? 1) что такое location.pathname? и 2) я не понимаю часть .indexOf(current)... спасибо!

DiamondJoe12 09.04.2022 23:57

location.pathname дает вам URL-адрес. В вашем случае /about.html или любой другой из панели навигации.

Marius Gardelli 10.04.2022 00:08

Для второго вопроса вы проверяете текущий путь.

Marius Gardelli 10.04.2022 00:22
stackoverflow.com/questions/4597050/…
Marius Gardelli 10.04.2022 00:22

Как сейчас написано, ваш ответ неясен. Пожалуйста, редактировать, чтобы добавить дополнительную информацию, которая поможет другим понять, как это относится к заданному вопросу. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.

Community 10.04.2022 02:30

Другие вопросы по теме