title: Trouble getting nav bar to highlight selected tab
body: <p>I'm having trouble figuring this out.  I need the selected tab to be underlined when you're on that page.  So when you're on the settings page I need the settings tab to be underlined, and when your on the account page I need the account tab to be underlined.  Not sure what I’m doing wrong.  I'm not that good at JavaScript or CSS.</p>
  <p>This is what I need:
  <a href="https://i.stack.imgur.com/AUjjF.png" rel="nofollow noreferrer">pic of tabs with underline</a></p>
  <p>This is what I’m getting:
  <a href="https://i.stack.imgur.com/wmC6F.png" rel="nofollow noreferrer">pic of tabs without underline</a></p>
  <p>codepen: <a href="https://codepen.io/Mike5678/pen/oNdgvbJ" rel="nofollow noreferrer">https://codepen.io/Mike5678/pen/oNdgvbJ</a></p>
  <pre><code>&lt;div id=&quot;nav&quot;&gt;
  &lt;div class=&quot;icons-box&quot;&gt;
      &lt;a href=&quot;login.html&quot; class=&quot;icons-links&quot;&gt;&lt;span onclick=&quot;addSelected()&quot; class=&quot;material-icons&quot;&gt;account_circle&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  &lt;div class=&quot;icons-box&quot;&gt;
      &lt;a href=&quot;settings.html&quot; class=&quot;icons-links&quot;&gt;&lt;span onclick=&quot;addSelected()&quot; class=&quot;material-icons&quot;&gt;settings&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>#nav {
      background-color: #171a1c;
      border-bottom: 1px solid #808080;
      height: 60px;
      display: flex;
      justify-content: flex-end
  }
  
  .icons-box {
      border-left: 1px solid #808080;
      width: 60px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .icons-box.selected {
      border-bottom: 2px solid #b57917;
  }
  </code></pre>
  <pre><code>function addSelected() {
      $(&quot;.icons-links&quot;).click(function(event){
          $(&quot;.icons-box&quot;).removeClass(&quot;selected&quot;);
          $(&quot;.icons-box&quot;).addClass(&quot;selected&quot;);
      })
  }    
  </code></pre>