Как поменять местами ссылки с помощью jquery

Question

Как обмениваться ссылками, используя jquery.

Под навигацией будет отображаться содержание div для каждой вкладки. выбранная ссылка всегда будет рядом с первой ссылкой «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> 

Это будет вкладка Аякса система, но только вкладка выглядит навигация. Я хочу знать, как сохранить «выбранный» элемент всегда в следующем первом элементе.

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

$(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

Вы можете .prependTo() в .selected один, чтобы переместить его, чтобы быть первым ребенком, как это:

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