title: Add class to element this element is child of?
body: <p>I'm trying to add a class "active" to the li that was clicked on, however in my script, I'm retrieving the a that was clicked on since I'd like to retrieve the href of "". What's the script to do that?</p>
  
  <pre><code>&lt;ul class = "tab-links"&gt;
          &lt;!-- Each tab is Anchored to its Contents --&gt;
          &lt;li class = "active"&gt;&lt;a href ="#panel1"&gt;Panel 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href ="#panel2"&gt;Panel 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href ="#panel3"&gt;Panel 3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href ="#panel4"&gt;Panel 4&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  
  
   &lt;script type="text/javascript"&gt;
         $(function () 
    {
  
      //Listen for tab-links clicks
      $('.tab-panels .tab-links a ').on('click', function (e)
          {   
              //Remove current active panelToShow
              $('.tab-panels .tab-links li.active').removeClass('active');
  
              //Make panelToShow link active
              //??How do I addClass active to the li that was clicked on, when "this" refers to an "a" element?  
              //????$(this).addClass('active');
    ... })
     } 
   &lt;/script&gt; ...
  </code></pre>