title: Pure Javascript | add class to <li> elements
body: <p>I am trying to add class for <code>&lt;li&gt;</code> elements on click event. If I click on the first element it should to get class "current-tab" and others <code>&lt;li&gt;</code> elements should not contain that class and etc. 
   Here is some HTML code:</p>
  
  <pre><code>&lt;nav class="interest-nav"&gt;
    &lt;ul id="interest-ul"&gt;
       &lt;li&gt;&lt;a href="#box1"&gt;Fashion&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#box2"&gt;Movies&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a href="#box3"&gt;TV&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>and Javascript code:</p>
  
  <pre><code>var navUl = document.getElementById('interest-ul').getElementsByTagName('li');
  for (var y = 0; y &lt; navUl.length; y++) {
      navUl[y].addEventListener('click', checkLi);
  }
  
  function checkLi() {
      if (navUl.className === '') {
          navUl.className = 'current-tab';
      } else {
          navUl.className = '';
      }
  }
  </code></pre>
  
  <p>Thank you for your attention and for your help! </p>