Как менять выделение заголовка в меню шапки в зависимости от страницы ?

265

22 января 2018, 06:00

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

Answer 1

Имея только CSS, этого делать невозможно.. Нужно добавить нужный класс к каждой странице в котором пользователь находится, сделать следующим образом просто создать класс .active где те же самые стили и добавлять активному элементу.

Как например в наипростейшем простейшем примере внизу:

$('li').on('click', function() { 
  $('.active').add(this).toggleClass('active'); 
});

body { 
  font-family: Arial; 
} 
 
ul li { 
  position: relative; 
  display: inline-block; 
  text-transform: uppercase; 
  margin-left: 5px; 
  border: none; 
  cursor: pointer; 
} 
 
 
ul li:hover { 
  border-bottom: 2px solid red; 
} 
 
.active { 
  border-bottom: 2px solid red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul> 
  <li class='active'>Главная</li> 
  <li>Продукция</li> 
  <li>О нас</li> 
  <li>Личный кабинет</li> 
</ul>

Но для многостраничников желательно выносить меню в отдельный файл и манипулировать им с помощью принятого контекста от сервера.

Answer 2

Отлично работает, спасибо за помощь!

$('li').on('click', function() { 
  $('.active').add(this).toggleClass('active'); 
});

body { 
  font-family: Arial; 
} 
 
ul li { 
  position: relative; 
  display: inline-block; 
  text-transform: uppercase; 
  margin-left: 5px; 
  border: none; 
  cursor: pointer; 
} 
 
 
ul li:hover { 
  border-bottom: 2px solid red; 
} 
 
.active { 
  border-bottom: 2px solid red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul> 
  <li class='active'>Главная</li> 
  <li>Продукция</li> 
  <li>О нас</li> 
  <li>Личный кабинет</li> 
</ul>