sanyokdb
@sanyokdb
--save-dev

Как сделать условие для активных меню в gulp-file-include?

Подскажите, как передать данные в navbar в зависимости от страницы?
<!DOCTYPE html>
<html lang="ru" data-color-mode="dark">
<head>
  ...
</head>
<body class="layout">
  
  @@include('header.html')
  @@include('navbar.html')
  @@include('main.html')
  @@include('footer.html')

</body>
</html>


Блок navbar - которое в зависимости от страницы меняется класс active.
<div class="navbar">
  <div class="navbar__list">
    <a href="#" class="navbar__item active">Главная</a>
    <a href="#" class="navbar__item">О нас</a>
    <a href="#" class="navbar__item">Услуги</a>
    <a href="#" class="navbar__item">Контакты</a>
  </div>
</div>


Спасибо за ответ
  • Вопрос задан
  • 201 просмотр
Решения вопроса 1
sanyokdb
@sanyokdb Автор вопроса
--save-dev
Нашел решение через @@if
src/navbar.html
<nav>
    <ul>
        <li class="@@if (context.page === 'home') {active}">
            <a href="#">Главная</a>
        </li>
        <li class="@@if (context.page === 'about') {active}">
            <a href="#">О нас</a>
        </li>
    </ul>
 </nav>

index.html
@@include('src/navbar.html, {
    "page": "home"
})

about.html
@@include('src/navbar.html, {
    "page": "about"
})
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@dan_mk
<nav>
  <ul>
    <li class="@@activeclassHome">Home</li>
    <li class="@@activeclassAbout">About</li>
  </ul>
</nav>


@@include('_header.html', {activeclassHome": "active", "activeclassAbout": ""})
@@include('_header.html', {activeclassHome": "", "activeclassAbout": "active"})

stackoverflow

может конечно можно и через @@if сравнить переменные, чтобы класс применить нужный, но точно уже не скажу
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы