Toggling only a single class as active in a list with vanilla JS or CSS
Another approach could be with hidden radio inputs and :checked CSS selector :



input { display: none }
input:checked ~ * { color: red }
&lt;label&gt;&lt;input type="radio" name="li" checked&gt;&lt;li&gt;1&lt;/li&gt;&lt;/label&gt;
&lt;label&gt;&lt;input type="radio" name="li"&gt;&lt;li&gt;2&lt;/li&gt;&lt;/label&gt;
&lt;label&gt;&lt;input type="radio" name="li"&gt;&lt;li&gt;3&lt;/li&gt;&lt;/label&gt;
&lt;label&gt;&lt;input type="radio" name="li"&gt;&lt;li&gt;4&lt;/li&gt;&lt;/label&gt;