title: How to keep item from menu selected after clicking on it
body: <p>I have tried to create a small filter menu using Html, Css and Javascript. </p>
  
  <p>I have the following issue: when I click on a different item of the menu except for the first, the white "pill" element goes on the selected one, but after the page loads, it returns to the first element - when an item is clicked, the page reloads and goes to that section.</p>
  
  <p>This is the menu and the white pill element which is at the first item is the one that should remain on the selected items: the current behavior is that when I click on "today", for example, it moves over it, but when the page loads and I see the page for "today", the white pill returns to the first element.
  <a href="https://i.stack.imgur.com/WV8CY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WV8CY.png" alt="enter image description here"></a></p>
  
  <p>The code is here:</p>
  
  <pre><code> &lt;head&gt;
   &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
  
   &lt;div id="wrapper-filter"&gt;
   &lt;ul id="filter-bar"&gt;
       &lt;span class="pill"&gt;&lt;/span&gt;
          &lt;li class="filter-option option-1 active" data-target="option-1"&gt;&lt;a href="{{ route(request()-&gt;route()-&gt;getName(), 'last-day') }}" class="nav-item nav-link {{ $match_date == $third_day_date? 'active': '' }}"&gt;{{ $third_day_date }}&lt;/a&gt;&lt;/li&gt;
          &lt;li class="filter-option option-2" data-target="option-2"&gt;&lt;a href="{{ route(request()-&gt;route()-&gt;getName(), 'yesterday') }}" class="nav-item nav-link {{ $match_date == $second_day_date? 'active': '' }}"&gt;Yesterday&lt;/a&gt;&lt;/li&gt;
          &lt;li class="filter-option option-3" data-target="option-3"&gt;&lt;a href="{{ route(request()-&gt;route()-&gt;getName(), 'today') }}" class="nav-item nav-link {{ $match_date == $today_date? 'active': '' }}"&gt;Today&lt;/a&gt;&lt;/li&gt;
          &lt;li class="filter-option option-4" data-target="option-4"&gt;&lt;a href="{{ route(request()-&gt;route()-&gt;getName(), 'tomorrow') }}" class="nav-item nav-link {{ $match_date == $tomorrow_date? 'active': '' }}"&gt;Tomorrow&lt;/a&gt;&lt;/li&gt;
  
        &lt;/ul&gt;
  
  
  
                     &lt;script&gt;
                  $(document).ready( function() {
  
                  $("#filter-bar li").click(function(){
                      $("#filter-bar li").removeClass("active");
                      $(this).addClass("active");
                      $("#filter-bar").removeClass().addClass($(this).attr("data-target"));
  
                  });
  
              })
              &lt;/script&gt;
              &lt;/div&gt;
  </code></pre>
  
  <pre><code>&lt;style&gt;
  
  #filter-bar {
       width: 100%; 
       margin:0; 
       padding:0; 
       height:auto; 
       display:inline-flex;
  }
  
  #wrapper-filter {
       background-color:#484747; 
       width: 100%; 
       height:auto; 
       margin:30px auto; 
       border-radius: 30px; 
       box-sizing: border-box;
  }
  
  #filter-bar li {
       width: 100%;
       background-color: transparent; 
       text-align: center; 
       list-style-type: none;
       z-index:10; 
       cursor: pointer; 
       font-family: Open Sans, sans-serif; 
       font-weight: 100; 
       font-size: 18px;
       line-height:36px;
  }
  
  .pill {
       position: absolute; 
       width:25%; 
       height: 50px; 
       background-color: #fff; 
       border-radius: 30px; 
       color: #444; 
       z-index:10; 
       border: 5px solid #eee; 
       box-sizing: border-box; 
  }
  
  .filter-option {
       transition: color 500ms;
  }
  
  #filter-bar.option-1 .pill {
       margin-left: 0%; 
       transition: margin-left 200ms ease;
  }
  
  #filter-bar.option-2 .pill {
        margin-left: 24.5%; 
        transition: margin-left 200ms ease;
  }
  
  #filter-bar.option-3 .pill {
         margin-left: 48.8%; 
         transition: margin-left 200ms ease;
  }
  
  #filter-bar.option-4 .pill {
          margin-left: 72.5%; 
          transition: margin-left 200ms ease;
  }
  
  .option-1.active{
      color:#484747; transition: color 200ms;
  }   
  
  .option-2.active{
      color:#484747; transition: color 200ms;
  }   
  
  .option-3.active{
      color:#484747; transition: color 200ms;
  }   .
  
  .option-4.active {
      color:#484747; transition: color 200ms; }
  
  .nav-item {
      margin: 0 1px;
      position: relative;
  }
  
  .nav-item .nav-link {
      text-transform: uppercase;
      font-weight: 600;
  }
  
  .nav-item::before {
      position: absolute;
      width:25%; 
      height: 50px; 
      background-color: #fff; 
      border-radius: 30px; 
      color: #444; 
      z-index:10; 
      border: 5px solid #eee; 
      box-sizing: border-box;
      -webkit-transform: scaleY(0);
      transform: scaleY(0);
      -webkit-transform-origin: top;
      transform-origin: top;
      transition: -webkit-transform .3s ease;
      transition: transform .3s ease;
      transition: transform .3s ease, -webkit-transform .3s ease;
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>What can I do in order to make the white pill element remain on the clicked item of the menu?
  I think the items that might needs a change are the ones from the end of the css, ".nav-item::before"...but I am not sure. Can anyone help me?</p>