Нашел плагин хочу адаптировать его под свой сайт, но у меня не получаеться сделать состояние для акитивной ссылки, т.е. у меня каждой ссылке (кнопке) необходим свой бекграунд и размер(увеличиваеться в активном состоянии на несколько px) перепробовал массу плагинов но подходящего так и не нашел. В этом плагине для всех активных ссылок присваивается класс "selekted", можно ли сделать для каждой активной ссылки свой класс? Код (Text): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU-lite"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title> :-)</title> <script type="text/javascript" src="http://yandex.st/jquery/1.4.2/jquery.min.js"></script> </head> <body> <script type="text/javascript"> $(document).ready(function(){ $("ul.tabNavigation li:last").css("border-bottom", "1px solid #333"); }); $(function () { var tabContainers = $('div.tabcontent div.tabs-cont div'); // Заменяем переменной все div находящиеся в .tabs-cont. tabContainers.hide().filter(':first').show(); // При загрузке, эти div'ы прячем, кроме первого. $('div.tabcontent ul.tabNavigation a').click(function () { // Действие происходит при клике на ссылку. tabContainers.hide(); // Все div'ы прячем. tabContainers.filter(this.hash).fadeIn("slow"); // Плавно проявляем блок с id'ом указанном в href ссылки. $('div.tabcontent ul.tabNavigation a').removeClass('selected'); // Удаляем у всех ссылок класс selected. $(this).addClass('selected'); // Добавляем класс selected ссылке, на которую кликнули. return false; }).filter(':first').click(); // При загрузке, автоматически присваеваем первой ссылке класс selected. }); </script> <style> *{margin:0;padding:0;} body { margin: 100px auto; width:1000px; } a{outline:none;color:#333;text-decoration:none;display:block;} img{border:none;} ul{float:left;width:75px;} li{ list-style:none; border:1px solid #333; border-bottom:0; background:#ccc; width:74px; text-align:center; } .tabcontent{ border:0px solid #333; } .selected{ background:#ebebeb; } .tabs-cont{margin-left:100px;padding:5px 10px;border:1px solid #333; } .clear{clear:both;} </style> <div class="tabcontent"> <ul class="tabNavigation"> <li><a class="salon" href="#One">первая кнопка</a></li> <li><a class="specialisti" href="#Two">вторая кнопка</a></li> <li><a class=" prais" href="#Three">третья кнопка</a></li> <li style="border-bottom: 1px solid rgb(51, 51, 51);"><a class="selected" href="#Four">четвертая кнопка</a></li> </ul> <div class="tabs-cont"> <div style="display: none;" id="One"> Первый текст </div> <div style="display: none;" id="Two"> Второй текст </div> <div style="display: none;" id="Three"> Третий текст </div> <div style="display: block;" id="Four"> Четвертый текст </div> </div> </div></body></html> Или может кто подскажет готовый плагин который можно переделать под свои нужды, вот конечный результат который я хочу достичь: