Javascript - 如果窗口宽度 <= 800px 将活动链接移动到导航顶部

Question

我有一个响应式导航，该导航固定在顶部，如果屏幕截图为＆lt; = 800 px宽。

。

现在，如果屏幕大小为＆lt; = 800 px宽，但我正在尝试将当前活动的链接移至导航的顶部，但我似乎找不到方法。

我尝试了JavaScript，但由于单击链接时页面刷新或更改，因此不会将当前活动的链接保持在顶部。

我试图将循环放在if statement中，但这不起作用，所以我删除了if-statement。

如果有人可以帮助我解决这个问题，我真的很感激。

这是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：

<nav>
<ul id="nav" class="topNav">
    <li><a onclick="moveLink()" href="/">Placeholder1</a></li>
    <li><a onclick="moveLink()" href="Placeholder1.html">Placeholder1</a></li>
    <li><a onclick="moveLink()" href="Placeholder1.html">Placeholder1</a></li>
    <li><a onclick="moveLink()" class="active" href="licenses.html">Placeholder1 / FAQ</a></li>
    <li><a onclick="moveLink()" href="Placeholder1.html">Placeholder1</a></li>
    <li><a onclick="moveLink()" href="contact.php">Placeholder1</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>

我有两个样式表，菜单通过JavaScript打开和关闭。

这是我的移动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

我认为您只需使用flexbox和 order属性使用CSS。

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

order: -1确保列表项目将移至列的顶部。

我将active类移至li而不是a，以使此工作更容易。

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>