Javascript - ウィンドウ幅<= 800pxの場合、アクティブリンクをナビゲーションの先頭に移動

Question

スクリーンサイズが< = 800ピクセルの場合、上部に固定され、水平から垂直に移動する応答ナビゲーションがあります。

画面サイズが< = 800ピクセル幅の場合、現在アクティブなリンクをナビゲーションの上部に移動しようとしていますが、方法が見つからないようです。

Javascriptを試しましたが、リンクがクリックされたときにページが更新または変更されるため、現在アクティブなリンクが一番上に表示されません。

私はループをif文に入れようとしましたが、うまくいきませんので、if文を削除しました。

誰かがこの問題を解決するのを手助けできるなら、本当に感謝します。

がここにJavascriptのです：

<nav> 
<ul id="nav" class="topNav"> 
    <li><a onclick="moveLink()" href="/">BEATS</a></li> 
    <li><a onclick="moveLink()" href="sounds.html">SOUNDS</a></li> 
    <li><a onclick="moveLink()" href="services.html">SERVICES</a></li> 
    <li><a onclick="moveLink()" class="active" href="licenses.html">LICENSES/FAQ</a></li> 
    <li><a onclick="moveLink()" href="downloads.html">DOWNLOADS</a></li> 
    <li><a onclick="moveLink()" href="contact.php">CONTACT</a></li> 
    <li class="icon"><a href="javascript:void(0);" onclick="myFunction()"> 
    <img alt="open menu" src="graphics/menu.png" style="height: 30px; width: 30px;"></a> 
    </li> 
</ul> 

私は2つのスタイルシートを持っていると、メニューはJavascriptを経由して開閉：

/*------------------------move active link to top------------------------*/ 
function moveLink(){ 
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 
var list = document.getElementById('nav').childNodes; 
for (var i = 0; i < list.length; i++) { 
    list[i].addEventListener('click',function() 
    {nav.insertBefore(this, nav.childNodes[0])}); 
} 
} 

ここではナビゲーションのhtmlです。私はあなたがフレキシボックスとorderプロパティを使用して、このちょうど使用してCSSを行うことができると思い、事前に

/*------------------------navigation------------------------*/ 
.topNav { 
z-index: 1; 
list-style-type: none; 
margin: 0 auto; 
padding: 0; 
overflow: hidden; 
position: fixed; 
top: 0; 
width: 100%; 
font-size: 0px; 
background-color: rgba(0,0,0,0.8); 
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75); 
} 
.topNav li { 
display: inline; 
} 
.topNav li a { 
font-size: 12px; 
display: inline-block; 
color: #fff; 
text-decoration: none; 
transition: color 0.2s ease-in-out; 
line-height: 38px; 
padding: 0px 0px 0px 20px; 
} 
.topNav li a:hover { 
color: #777; 
} 
.topNav li a.active { 
color: #999; 
} 
/*------------------------responsive navigation closed------------------------*/ 
.topNav li:not(:first-child) { 
display: none; 
} 
.topNav li.icon { 
float: right; 
display: inline-block; 
height: 38px; 
vertical-align: middle; 
transition: opacity 0.2s ease-in-out; 
margin: 4px 5px 0px 0px; 
width: 30px; 
height: 30px; 
padding-right: 20px; 
} 
.icon:hover { 
opacity: 0.5; 
} 
/*------------------------responsive navigation opened------------------------*/ 
.topNav.responsive { 
position: fixed; 
top: 0px; 
} 
.topNav.responsive li.icon { 
margin: 0 0 0 0; 
position: absolute; 
top: 4px; 
right: 25px; 
width: 30px; 
height: 30px; 
padding-right: 0px; 
z-index: 1; 
} 
.topNav.responsive li.icon:hover { 
opacity: 0.5; 
} 
.topNav.responsive li { 
float: none; 
display: inline; 
} 
.topNav.responsive li a { 
display: block; 
} 

おかげで、 ケン

Answer 1

：

は、ここに私の携帯のCSSです。

@media (max-width: 800px) { 
    nav ul { 
    display: flex; 
    flex-direction: column; 
    } 
    .active { 
    order: -1; 
    } 
} 

order: -1リスト項目が確実に列の先頭に移動するようにします。

aの代わりにactiveをliに移動しましたが、この作業をやや簡単にしました。

codepen

スニペット

body { 
 
    font-family: sans-serif; 
 
} 
 

 
nav { 
 
    background: grey; 
 
    padding: 20px; 
 
} 
 

 
nav ul { 
 
    list-style-type: none; 
 
} 
 

 
nav ul li { 
 
    display: inline-block; 
 
    margin-right: 8px; 
 
} 
 

 
nav ul li:last-child { 
 
    margin-right: 0; 
 
} 
 

 
nav ul li a { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
@media (max-width: 800px) { 
 
    nav ul { 
 
    display: flex; 
 
    flex-direction: column; 
 
    } 
 
    .active { 
 
    order: -1; 
 
    } 
 
}

<nav> 
 
    <ul id="nav" class="topNav"> 
 
    <li><a onclick="moveLink()" href="/">BEATS</a></li> 
 
    <li><a onclick="moveLink()" href="sounds.html">SOUNDS</a></li> 
 
    <li><a onclick="moveLink()" href="services.html">SERVICES</a></li> 
 
    <li class="active"><a onclick="moveLink()" href="licenses.html">LICENSES/FAQ</a></li> 
 
    <li><a onclick="moveLink()" href="downloads.html">DOWNLOADS</a></li> 
 
    <li><a onclick="moveLink()" href="contact.php">CONTACT</a></li> 
 
    </ul> 
 
</nav>