アクティブなリンクを表示する応答メニュー

Question

レスポンシブメニューの上部にアクティブなリンクを表示するのに問題があります。選択したときに上部に表示したい場合は選択済みのアクティブなCSSスタイルが既に適用されていますが、それは一番上に表示されている、私はそれがおそらくラベルをうまくいくようにする方法がわからないのですか？ は、ここに私のコード

CSS

@media screen and (max-width:768px) { 
    ul.topnav li a { 
     display: inline-block; 
     color: #fff; 
     text-align: center; 
     padding: 20px 20px 20px 20px; 
     height: auto; 
     } 
    ul.topnav .active { 
     color: #ee1921; 
     border-bottom: none!important; 
     font-size: 20px; 
     } 
    ul.topnav.responsive { 
     position: relative; 
     } 
    ul.topnav.responsive li.icon { 
     position: absolute; 
     right: 0; 
     top: 0; 
     } 
    ul.topnav.responsive li { 
     float: none; 
     display: inline; 
     } 
    ul.topnav.responsive li a { 
     display: block; 
     text-align: left; 
     font-size: 20px; 
     padding: 20px 20px 15px 20px; 
     } 
ul.topnav.responsive .active { 
     border-bottom: 1px solid #fff; 
     } 
} 

HTML

<ul class="topnav" id="myTopnav"> 
    <li><a class="navItem" href="FAQ-sports.html">Sports</a></li> 
    <li><a href="FAQ-casino.html" class="navItem">Casino</a></li> 
    <li><a href="#Slots" class="navItem">Slots</a></li> 
    <li><a href="#Vegas" class="navItem">Vegas</a></li> 
    <li><a href="#Bingo" class="active">Bingo</a></li> 
    <li class="icon"><a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a></li> 
</ul><br><br> 

だとjQueryのスクリプトは次のとおりです。

<script> 
function myFunction() { 
    var x = document.getElementById("myTopnav"); 
    if (x.className === "topnav") { 
     x.className += " responsive"; 
    } else { 
     x.className = "topnav"; 
    } 
} 
</script> 

Answer 1

あなたはする.activeクラスを変更、親にdisplay: flex; flex-direction: column;を使用することができます代わりにliに追加してください（フレックスチャイルドflex-parent）、次に.active { order: -1; }を入力してリストの先頭にliと入力します。

function myFunction() { 
 
    var x = document.getElementById("myTopnav"); 
 
    if (x.className === "topnav") { 
 
     x.className += " responsive"; 
 
    } else { 
 
     x.className = "topnav"; 
 
    } 
 
}

@media screen and (max-width:768px) { 
 
    ul.topnav li a { 
 
    display: inline-block; 
 
    color: #fff; 
 
    text-align: center; 
 
    padding: 20px 20px 20px 20px; 
 
    height: auto; 
 
    } 
 
    ul.topnav .active a { 
 
    color: #ee1921; 
 
    border-bottom: none!important; 
 
    font-size: 20px; 
 
    } 
 
    ul.topnav.responsive { 
 
    position: relative; 
 
    } 
 
    ul.topnav.responsive li.icon { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    } 
 
    ul.topnav.responsive li { 
 
    float: none; 
 
    display: inline; 
 
    } 
 
    ul.topnav.responsive li a { 
 
    display: block; 
 
    text-align: left; 
 
    font-size: 20px; 
 
    padding: 20px 20px 15px 20px; 
 
    } 
 
    ul.topnav.responsive .active a { 
 
    border-bottom: 1px solid #fff; 
 
    } 
 
    .topnav { 
 
    display: flex; 
 
    flex-direction: column; 
 
    } 
 
    .active { 
 
    order: -1; 
 
    } 
 
}

<ul class="topnav" id="myTopnav"> 
 
    <li><a class="navItem" href="FAQ-sports.html">Sports</a></li> 
 
    <li><a href="FAQ-casino.html" class="navItem">Casino</a></li> 
 
    <li><a href="#Slots" class="navItem">Slots</a></li> 
 
    <li><a href="#Vegas" class="navItem">Vegas</a></li class="active"> 
 
    <li class="active"><a href="#Bingo" class="">Bingo</a></li> 
 
    <li class="icon"><a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a></li> 
 
</ul><br><br>