Add class to li tag on click
<p>How do I add a class to an <code>&lt;li&gt;</code> element when it is clicked?</p>

<p>I have the following code:</p>

<pre><code>&lt;ul id="moodtabs" class="side bar tabs"&gt;
    &lt;li id="tabs1" onclick="showStuff(this)" class="mbutton"&gt;Cheerful&lt;/li&gt;
    &lt;li id="tabs2" onclick="showStuff(this)" class="mbutton"&gt;Romantic&lt;/li&gt;
&lt;/ul&gt;

&lt;div id="tabs-1" class="tabContent" style="display: block;"&gt;
    &lt;h4&gt;Content 1&lt;/h4&gt;
&lt;/div&gt;
&lt;div id="tabs-2" class="tabContent" style="display: block;"&gt;
    &lt;h4&gt;Content 2&lt;/h4&gt;
&lt;/div&gt;
</code></pre>

<p>When the user clicks on the first <code>&lt;li&gt;</code> then content 1 is shown and the same will happen for the 2nd <code>&lt;li&gt;</code> with the 2nd content.</p>

<p>Here is my JS:</p>

<pre><code>function showStuff(element)  {
    var tabContents = document.getElementsByClassName('tabContent');
    for (var i = 0; i &lt; tabContents.length; i++) { 
        tabContents[i].style.display = 'none';
    }

    var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
    document.getElementById(tabContentIdToShow).style.display = 'block';
}

$('ul#moodtabs li').click(function() {
    $('ul li.current').removeClass('current');
    $(this).closest('li').addClass('current');
});
</code></pre>

<p>I'm trying to add a class <code>active</code> to the <code>&lt;li&gt;</code> tags so I can style them when they are active.</p>