Показать сообщение отдельно
  #9 (permalink)  
Старый 11.08.2013, 17:17
Аспирант
Отправить личное сообщение для zevilz Посмотреть профиль Найти все сообщения от zevilz
 
Регистрация: 24.05.2012
Сообщений: 93

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>
Ответить с цитированием