Я попытался создать небольшое меню фильтра, используя Html, Css и Javascript.
У меня возникает следующая проблема: когда я щелкаю по другому пункту меню, кроме первого, белый элемент «таблетки» переходит на выбранный, но после загрузки страницы он возвращается к первому элемент - при щелчке по элементу страница перезагружается и переходит в этот раздел.
Это меню, и элемент белой таблетки, который находится у первого элемента, должен оставаться в выбранных элементах: текущее поведение таково, что когда я нажимаю «сегодня», например, он перемещается по нему, но когда страница загружается, и я вижу страницу «сегодня», белая таблетка возвращается к первому элементу. 
Код здесь:
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<div id="wrapper-filter">
<ul id="filter-bar">
<span class="pill"></span>
<li class="filter-option option-1 active" data-target="option-1"><a href="{{ route(request()->route()->getName(), 'last-day') }}" class="nav-item nav-link {{ $match_date == $third_day_date? 'active': '' }}">{{ $third_day_date }}</a></li>
<li class="filter-option option-2" data-target="option-2"><a href="{{ route(request()->route()->getName(), 'yesterday') }}" class="nav-item nav-link {{ $match_date == $second_day_date? 'active': '' }}">Yesterday</a></li>
<li class="filter-option option-3" data-target="option-3"><a href="{{ route(request()->route()->getName(), 'today') }}" class="nav-item nav-link {{ $match_date == $today_date? 'active': '' }}">Today</a></li>
<li class="filter-option option-4" data-target="option-4"><a href="{{ route(request()->route()->getName(), 'tomorrow') }}" class="nav-item nav-link {{ $match_date == $tomorrow_date? 'active': '' }}">Tomorrow</a></li>
</ul>
<script>
$(document).ready( function() {
$("#filter-bar li").click(function(){
$("#filter-bar li").removeClass("active");
$(this).addClass("active");
$("#filter-bar").removeClass().addClass($(this).attr("data-target"));
});
})
</script>
</div>
<style>
#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;
}
</style>
Что я могу сделать, чтобы элемент белой пилюли остался на выбранном элементе меню? Я думаю, что элементы, которые могут нуждаться в изменении, это элементы конца css, ".nav-item :: before" ... но я не уверен. Кто-нибудь может мне помочь?