无序列表 - 列表项位置

Question

目前我有一个5页的网站，主导航正在使用无序列表显示。我想要实现的目标是＆＃34;活跃的＆＃34;要在列表中首先显示的页面。

例如，如果我有这些页面：＆＃34; Home |关于|联系|博客＆＃34 ;.当您进入联系页面时，这应移至列表顶部，因此菜单将如下所示：＆＃34;主页|关于|博客＆＃34;

导致我出现问题的原因是菜单是通过php包含的，因此所有页面只有一个菜单，通过PHP我已经制作了它以便添加一个＆＃34; active＆＃34 ;类到当前页面菜单项。

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

编辑：

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

            <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))
    }
})