无序列表 - 列表项目的位置

问题描述：

目前我有一个网站有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>

存储在无序列表这些属性？你不能把你的活动页面放在无序列表的顶部，我的意思是最顶端的索引？ –

为什么不发布添加“活动”类的代码？为了回答你的问题，修改会更容易。 – BeS

对不起，我添加了包含的导航页面。 – Bonzai

答

这里是一个纯CSS方式使用Flexbox的顺序做。

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

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

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

支持：IE10 +，火狐，Chrome

真的很酷的解决方案+1 – Edward

@Edward谢谢，伙计。 –

完美。谢谢！ – Bonzai

答

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>

检查：https：//jsfiddle.net/3ves02f8/1/ –

这很好....你需要那个？ –

你是什么意思我需要那个？是它更简单;我记得当我第一次理解'append（）/ prepend（）'' –

答

你可以做这样的事情：

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

为什么不把它与位置比较，为什么不使用hasClass（'active'）？如果不修改位置对象，此代码将不起作用。 – Edward

我试了一下，它的工作原理......但你可以使用'hasClass（'active'）'也是..我不认为有什么区别。 –

当您引用位置时，您是否使用全球位置对象？ – Edward

无序列表 - 列表项目的位置

相关推荐