Как установить несколько классов для элемента с условным

Question

Этот скрипт EJS

<li class=<%= (path==='about') ? 'active main-header--nav-item' : 'main-header--nav-item' %>>about</li>

отображается на странице следующим образом:

<li class="active" main-header--nav-item="">about</li>

когда я пытаюсь вывести его как:

<li class="active main-header--nav-item">about</li>

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

Answer 1

Это потому, что в вашем шаблоне EJS вы не заключаете список классов в "".В этом случае символ пробела в конечном итоге будет интерпретироваться как конец атрибута.Ваш шаблон, приведенный выше, на самом деле выглядит так:

<li class=active main-header--nav-item>about</li>

Браузер интерпретирует class как значение active, а main-header--nav-item - это просто некоторый пользовательский атрибут HTML, следовательно, ваш наблюдаемыйвывод:

<li class="active" main-header--nav-item="">about</li>

Вы должны сделать это вместо:

<li class="<%= (path==='about') ? 'active main-header--nav-item' : 'main-header--nav-item' %>">about</li>