单击后如何使菜单中的项目保持选中状态

时间：2020-03-24 20:43:27

标签： javascript html css menu selected

我尝试使用HTML，CSS和Javascript创建一个小的过滤器菜单。

我遇到以下问题：当我单击菜单中除第一个菜单项以外的其他项时，白色“ pill”元素在选定的菜单项上，但是在页面加载后，它返回到第一个元素-单击一个项目，页面将重新加载并转到该部分。

这是菜单，位于第一项的白色药片元素是应保留在所选项上的元素：当前的行为是，例如，当我单击“今天”时，它会移到它上面，但是当页面加载并且我看到“今天”页面时，白色药丸返回到第一个元素。 enter image description here

代码在这里：

 <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” ...但我不确定。谁能帮我吗？

2 个答案:

答案 0 :(得分：0)

这是因为您没有重定向URL。 一种解决方案是创建排序选项卡。 This相当简化了解释，因此请检查一下。它显示了如何创建整页标签。

答案 1 :(得分：0)

您正在使用作为链接的标签。当您单击它们时，将加载链接地址。您可以防止如图所示的默认行为，但是您要做什么？

                $(document).ready( function() {

                $("#filter-bar li").click(function(){
                 event.preventDefault();
                   $("#filter-bar li").removeClass("active");
                    console.log(this);
                    $(this).addClass("active");
                    $("#filter-bar").removeClass().addClass($(this).attr("data-target"));

                });

            })
            
 

#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;
}
 <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>
      
      </div>

相关问题
最新问题