id передается только 1
вот полная версия скрипта:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.menu li a').click(function() {
$('.menu li').removeClass('selected');
$(this).parent('li').addClass('selected');
imgWidth = '52px';
thisItem = $(this).attr('rel');
if(thisItem != "all") {
$('.item li[rel='+thisItem+']').stop()
.animate({'width' : imgWidth,
'opacity' : 1,
'marginRight' : '.5em',
'marginLeft' : '.5em'
});
$('.item li[rel!='+thisItem+']').stop()
.animate({'width' : 0,
'opacity' : 0,
'marginRight' : 0,
'marginLeft' : 0
});
} else {
$('.item li').stop()
.animate({'opacity' : 1,
'width' : imgWidth,
'marginRight' : '.5em',
'marginLeft' : '.5em'
});
}
})
$('.item li img').animate({'opacity' : 0.5}).hover(function() {
$(this).animate({'opacity' : 1});
}, function() {
$(this).animate({'opacity' : 0.5});
});
});
</script>
<style>
ul {
margin: 0;
text-align: left;
}
ul.menu {
margin-left: .5em;
margin-bottom: 1em;
}
ul.menu li {
list-style-type: none;
display: inline-block;
font-weight: bold;
text-shadow: 1px 1px 0px #f3f5da;
padding: 2px 15px;
}
.selected {
-webkit-border-radius: 15px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #acac75;
-webkit-box-shadow: 1px 1px 0px #8c8c5d;
}
.selected a, .selected a:visited {
text-shadow: 1px 1px 0px #8c8c60;
color: #fff;
}
ul.item li {
list-style-type: none;
display: block;
float: left;
margin: .5em;
}
ul.item li img {
border: 5px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 5px #ac987e;
-moz-box-shadow: 0px 0px 5px #ac987e;
box-shadow: 0px 0px 5px #ac987e;
}
a, a:visited {
color: #161616;
text-decoration: none;
}
</style>
<ul class="menu">
<li class="selected"><a href="#" rel="all">Все уроки</a></li>
<li><a href="#" rel="jquery">jQuery</a></li>
<li><a href="#" rel="css">CSS</a></li>
<li><a href="#" rel="php">PHP</a></li>
</ul>
<ul class="item">
<li rel="jquery"><a href="" target="_blank"><img src="rhttgbh" /></a></li>
<li rel="jquery"><a href="" target="_blank"><img src="edhdethg" /></a></li>
<li rel="css"><a href="" target="_blank"><img src="hetrheth" /></a></li>
<li rel="css"><a href="" target="_blank"><img src="rthrtg" /></a></li>
<li rel="php"><a href="" target="_blank"><img src="ethetrh" /></a></li>
<li rel="jquery"><a href="" target="_blank"><img src="hetr" /></a></li>
<li rel="css"><a href="" target="_blank"><img src="werhewrt" /></a></li>
<li rel="php"><a href="" target="_blank"><img src="wtrhwetr" /></a></li>
</ul>