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

Question

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

под навигацией будет разделение содержимого для каждой вкладки. выбранная ссылка всегда будет рядом с первой ссылкой «шестидесятника».

Код будет таким

   <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

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

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

Answer 2

Я бы выбрал немного другой подход, и он описан ниже и продемонстрирован на JSFiddle (попробуйте щелкнуть ссылки в примере)

Преимущества в том, что изменение можетбыть инициированным чистым CSS.Вам не нужно менять HTML или применять JavaScript, если вы делаете изменения на стороне сервера.Лично я считаю, что в конечном итоге это будет чище и проще в управлении.

ПРИМЕЧАНИЕ. Я немного изменил HTML, чтобы в нем содержался элемент li , в отличие от класса selected, в отличие отк элементу a .Я обнаружил, что применение выбранных и активных классов к содержащим элементам, в отличие от элемента click, обеспечивает большую гибкость.

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;}