jqueryを使用してリンクの場所を交換する方法

Question

jqueryを使用してリンクの場所を交換する方法。

以下のナビゲーションは、各タブのコンテンツ部門になります。選択されたリンクは常に最初の「sixrevision」リンクの横に表示されます。

コードは、この

<ul id="crumbs"> 
    <li><a href="#" class="selected">Home</a></li> 
    <li><a href="#">product 1</a></li> 
    <li><a href="#">product 1</a></li> 
    <li><a href="#">product 1</a></li> 
    /ul> 

ようになりますこれは、Ajaxタブシステムになりますが、唯一のタブがパンくずのように見えます。最初のアイテムの次のアイテムに常に「選択済み」アイテムを保持する方法を知りたい。

Answer 1

私は少し異なるアプローチを取るだろうし、それはJSFiddleで以下に概説して実証されています例のリンク）

この利点は、変更が純粋なCSSによって開始できることです。サーバー側の変更を行う場合は、HTMLを変更したり、JavaScriptを適用したりする必要はありません。私は個人的にはこれが長期的にはよりクリーンで管理しやすいと感じています。

注：私は含む李要素ファッション要素ではなく「選択された」クラスを持つように、少しHTMLを変更しました。私は、「選択された」クラスと「アクティブな」クラスをクリック要素とは対照的に、包含要素に適用することにより、より柔軟性があることを見出しました。

HTML

<ul id="crumbs"> 
    <li><a href="#">XHTML</a></li> 
    <li class="selected"><a href="#">Javascript</a></li> 
    <li><a href="#">Flash</a></li> 
    <li><a href="#">SEO</a></li> 
</ul> 

JS私は、このタブはhttpに統合する[例えば]

$(function(){ 
    $('ul#crumbs li a').bind('click',crumbClick) 
}); 

function crumbClick(){ 
    $('ul#crumbs .selected').removeClass('selected'); 
    $(this).parents('li').addClass('selected'); 
    return false; 
} 

CSS

/* RESET */ 
ul#crumbs, ul#crumbs li { margin:0;padding:0;} 

ul#crumbs li a {display:inline-block;padding:3px 4px;} 

ul#crumbs li {list-style:none;display:inline;} 

ul#crumbs li.selected {float:left;} 

Answer 2

あなたはこのように、最初の子であることに、それを移動するために.selected 1を.prependTo()することができます（クリックしてみてください

$("#crumbs .selected").prependTo("#crumbs");