无序列表 - 列表项位置

Question

目前我有一个有 5 个页面的网站，主导航使用无序列表显示。我想要实现的是“活动”页面首先显示在列表中。

例如，如果我有以下页面：“主页 | 关于 | 联系方式 | 博客”。当您在联系页面上时，它应该移到列表的顶部，因此菜单将如下所示：“联系 | 主页 | 关于 | 博客”。

导致我出现问题的原因是该菜单是通过 php 包含的，因此所有页面只有一个菜单，并且通过 PHP 我已经完成了它，以便它向当前页面菜单项添加一个“活动”类。

我不确定最好的解决方案是什么，并且非常感谢任何帮助。

编辑：

这是包含在每个页面中的导航页面：

            <nav class="large-nav">
              <ul>
                <li <?php echo ($activePage == 'ourStory') ? "class='active'" : ""; ?> ><a href="our_story.php" title="">OUR STORY</a></li>
                <li <?php echo ($activePage == 'services') ? "class='active'" : ""; ?> ><a href="services.php" title="">SERVICES</a></li>
                <li <?php echo ($activePage == 'projects') ? "class='active'" : ""; ?> ><a href="projects.php" title="">PROJECTS</a></li>
                <li <?php echo ($activePage == 'contact') ? "class='active'" : ""; ?> ><a href="contact.php" title="">CONTACT</a></li>
                <li <?php echo ($activePage == 'upload') ? "class='active'" : ""; ?> ><a style="margin-right: 0;" href="upload.php#top" title="">UPLOAD</a></li>
              </ul>
            </nav>

Answer 1

这是一种使用 Flexbox 排序的纯 CSS 方法。

ul {
  …
  display: flex;
  flex-direction: column;
}

li[class=active] {
  order: -1;
  …
}

演示：http://codepen.io/antibland/pen/ZWjdqL

支持：IE10+、Firefox、Chrome

Answer 2

Jsfiddle link

jQuery：

$(function(){
    $("li").on("click", function(){
        $('ul').prepend($(this))
    }) 
})

HTML

<ul>
    <li>Home</li>
    <li>Contact</li>
    <li>About</li>
    <li>Blog</li>
</ul>

Answer 3

你可以这样做：

$('.large-nav li').each(function() { 
    if($(this).find('a').attr('href') == location)
    {
        $('.large-nav ul').prepend($(this))
    }
})