Стили для панели переключателей:
<style> .controls ul, .controls li { margin:0px; padding:0px; list-style:none; display:inline } .controls li a:link, .controls li a:visited { float:right; display:block; height:15px; width:15px; text-indent:-9999px; overflow:hidden; margin-left:10px; } .controls li a.switch_780 { background-image:url(http://forumupload.ru/uploads/000f/40/fc/87-1.jpg); } .controls li a.switch_980 { background-image:url(http://forumupload.ru/uploads/000f/40/fc/87-2.jpg); } .controls li a.switch_fluid { background-image:url(http://forumupload.ru/uploads/000f/40/fc/87-3.jpg); } .controls li a.select{border:solid 1px #cc0000; width:14px; height:14px;} </style>
Панель переключателей:
<div class="controls"> <ul> <li><a href="#" class="switch_fluid">100%</a></li> <li><a href="#" class="switch_980">980</a></li> <li><a href="#" class="switch_780">780</a></li> </ul> </div>
Сам скрипт:
<script type="text/javascript"> $(document).ready(function(){ $("a.switch_780").click(function () { $("div.controls a").removeClass("select"); $(this).addClass("select"); $("div#pun").animate({width: 780}, 'slow', function() {; }); }); $("a.switch_980").click(function () { $("div.controls a").removeClass("select"); $(this).addClass("select"); $("div#pun").animate({width: 980}, 'slow', function() {; }); }); $("a.switch_fluid").click(function () { $("div.controls a").removeClass("select"); $(this).addClass("select"); $("div#pun").animate({width: '100%'}, 'slow', function() {; }); }); }); </script>
В старых ИЕ анимация не работает