顯示活動鏈接和響應菜單

我在顯示響應菜單頂部的活動鏈接時遇到了問題，我希望它在選中時顯示在頂部，它在選中時已應用活動的CSS樣式，但不會顯示「 t顯示在頂部，我不確定如何使它成爲可能的標籤？這裏是我的代碼

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>

來源

2017-02-21 Anel Barco

您可以在父用display: flex; flex-direction: column;，改變.active類是在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>

來源

2017-02-21 19:51:15

顯示活動鏈接和響應菜單

回答

相關問題