無序列表 - 列表項目的位置

目前我有一個網站有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>

來源

2016-04-24 Bonzai

存儲在無序列表這些屬性？你不能把你的活動頁面放在無序列表的頂部，我的意思是最頂端的索引？ –

爲什麼不發佈添加「活動」類的代碼？爲了回答你的問題，修改會更容易。 – BeS

對不起，我添加了包含的導航頁面。 – Bonzai

這裏是一個純CSS方式使用Flexbox的順序做。

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

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

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

支持：IE10 +，火狐，Chrome

來源

2016-04-24 18:10:33

真的很酷的解決方案+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>

來源

2016-04-24 17:44:21

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

這很好....你需要那個？ –

你是什麼意思我需要那個？是它更簡單;我記得當我第一次理解'append（）/ prepend（）'' –

你可以做這樣的事情：

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

來源

2016-04-24 17:54:18

爲什麼不把它與位置比較，爲什麼不使用hasClass（'active'）？如果不修改位置對象，此代碼將不起作用。 – Edward

我試了一下，它的工作原理......但你可以使用'hasClass（'active'）'也是..我不認爲有什麼區別。 –

當您引用位置時，您是否使用全球位置對象？ – Edward

無序列表 - 列表項目的位置

回答

相關問題