如何为带有条件的元素设置多个类

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>