title: apply active class to menu without using JQuery
body: <p>I have seen many answers to how to add classes to current page but they all use JQuery.</p>
  
  <p>My menu has 2 levels, but I only want to apply the class to the first level of li tags.  So in the following example I would want the blog page 2 to show active in the blog li.</p>
  
  <p>Menu Structure:</p>
  
  <pre><code>            &lt;nav id="main_menu"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="index"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="blog"&gt;BLOG&lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="1"&gt;1&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="2"&gt;2&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt; 
                          &lt;/li&gt;
                      &lt;li&gt;&lt;a href="contact"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
  </code></pre>
  
  <p>I got this working, but it uses array numbers which will always be changing.  </p>
  
  <pre><code>var node = document.getElementById("main_menu").getElementsByTagName("li")[0];
  node.setAttribute("class", "active");
  </code></pre>
  
  <p>The top level li will stay the same but the 2nd level will be changing. </p>
  
  <p>Can I do the same code without array numbering or just using sons of ul without grandsons?</p>
  
  <p>How can I make it dynamic based on the page I am on without using JQuery.  Some pages will need to apply the class to the father li tag</p>