Блог

Главная - Вопросы по программированию - jquery применяет стиль, когда он не включен на определенной странице

jquery применяет стиль, когда он не включен на определенной странице

#javascript #jquery #angular

#javascript #jquery #угловой

Вопрос:

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

Вот мой скрипт:

 $(document).ready(function(){
  if (window.location.pathname != "") {
    $('#main-nav').css('background-color', 'black');
  }
});

Я использую Angular 10, если это имеет значение.

Комментарии:

1. вы проверили, какое утешительное окно. Расположение. имя пути на каждой странице

2. $(документ). возможно, ready был вызван еще до загрузки вашей страницы. Поскольку вы используете angularjs. Можете ли вы попробовать тот же сценарий при загрузке представления? Например, событие $viewContentLoaded .

3. @NurbekBoymurodov Я попробовал и вернул правильный путь, однако я заметил, что индексная страница была «/», а не просто «». Исправление этого решило проблему. Я также пробовал использовать . загрузка, но это не сработало, поэтому я вернулся к использованию .ready.

4. ИЛИ используйте AfterViewInit .

Ответ №1:

Вы не упомянули, каков путь вашего индекса. Я думаю, это может быть «/» или «индекс». Проверьте свой путь к индексу, затем сравните путь в вашем коде

 if (window.location.pathname != "" 
    || window.location.pathname != "/"
        || window.location.pathname != "index") {
            $('#main-nav').css('background-color', 'black');
}

Ответ №2:

Поскольку вы используете Angular 10, вы используете маршрутизатор и добавляете стиль, это очень просто.
Угловой маршрутизатор Вводит угловой маршрутизатор в ваш файл component.ts

 Constructur(public router: Router){
  //After Logging check the url string and add it to the ngClass condition
  console.log(router.url);
}

Затем в вашем html-файле в вашем случае в html-файле navbar к тегу navbar добавьте ngClass. Директива ngClass

 [ngClass]="{'customStyle': router.url=== '/'}"

В вашем css-файле компонента navbar.

 .customStyle{
background-color: "black"
}

Ответ №3:

пожалуйста, попробуйте это:

 $(document).ready(function(){
  if (window.location.pathname != "" || window.location.pathname.indexOf("index")>0) {
    $('#main-nav').css('background-color', 'black');
  }
});