ブロック要素内のインライン要素を移動する

Question

私は<nav>要素を持っています。その中には<nav>という要素があります。私はいくつかのjavascriptをクリックすると、そのクラス属性を介して現在のページがどのリンクになっているかを変更しています。私は現在のページクラスを持っているときに、そのリンク要素をナビゲーションバーの上部に昇格させたいと思います。たとえば：

<nav> 
    <a>Link 1</a> 
    <a class="currentpage">Link 2</a> 
</nav> 

物事を概念化を支援するために、このナビゲーションは、現在のリンクの単純なリストとしてではなく、ページの上部のバーとして表示されています。クラスが「currentpage」のときにリンク2がリストの最上部に表示されるようにします。

Answer 1

Flexboxを使用し、orderをjsに変更します。

$('nav a').click(function(e) { 
 
    e.preventDefault(); 
 
    $(this).addClass('currentpage').siblings().removeClass('currentpage'); 
 
})

nav { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.currentpage { 
 
    order: -1; 
 
    font-size: 30px; 
 
} 
 
a { 
 
    color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
    <a href="#">Link 1</a> 
 
    <a href="#">Link 2</a> 
 
    <a href="#" class="currentpage">Link 3</a> 
 
</nav>

Answer 2

ここで私はjsfiddleで例を作成している、私はそれをテストしている、それは私がjQueryの1.9

の手順を使用して、この例では

$('.nav a').on('click',function(){ 
    $(this).parent().children('a').removeClass(); 
    $(this).addClass('currentpage'); 
    console.log($(this)) 
    console.log($(this).parent().children('a').eq(0)) 
    $(this).insertBefore($(this).parent().children('a').eq(0)); 
}) 

の作品次のとおりです。

1. 正常に削除されないものがある場合は、既存のすべてのcurrentpageを削除します。

2. クリックするだけでcurrentpageクラスを追加します。

3. 私はあなたがすでにJavaScriptを使用しているので、あなたはメニューの一番上にダミー素子を作るだけ選択したコンテンツとそれを更新することができますNAVの下で最初のものに