1

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

2 ответа 2

0

Имея только 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>

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

2
  • А как происходит запоминание элемента, по которому кликнули? откуда другая страница знает, что именно этот элемент меню должен быть активным?
    – NeedH8
    21 янв 2018 в 15:21
  • В другой странице указать данный класс с этим активным меню.. Просто с помощью CSS файла этого сделать невозможно ведь.. Если сайт многостраничный, то хедер желательно поместить в один отдельный файл, и там с помощью принятого от сервера контекста менять меню.. Типа получили контекст menu='main', что-то типа следующего: <li class="menu {% if menu == 'main' %} active {% endif %}">Главная</li> и так далее..
    – E1mir
    21 янв 2018 в 15:28
0

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

$('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>

1
  • Если ответ принят, то нажмите на галочку принять ответ.
    – E1mir
    21 янв 2018 в 17:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.