<script type="text/javascript">
$(document).ready(function() {
$('li').click(function() {
if ( $(this).hasClass('small') && !($(this).hasClass('reworked')) ) { // Если этот <li> "маленький" и если он НЕ "обработан", то:
$('.now_u_are_big').removeClass('big'); // Убираем у присвоенного ранее класс "большой"
$('.now_u_are_big').addClass('small'); // Ставим ему класс "маленький"
$(this).removeClass('small'); // У текущего убираем "маленький"
$(this).addClass('big'); // Ставим ему "большой"
$(this).addClass('now_u_are_big'); // Присваеваем уме класс "теперь ты большой"
$(this).addClass('reworked'); // Присваеваем ему класс "обработан"
};
if ( $(this).hasClass('big') && !($('li').hasClass('reworked')) ) {
$(this).removeClass('big');
$(this).addClass('small');
$(this).addClass('reworked');
};
$('li').removeClass('reworked'); // Убираем класс "обработан", а то его потом не обработаешь :)
});
});
</script>
сам сайт здесь: test.stdmed.ru
кстати из-за того, что на сайте переход по якорям (плавный скролл):
<script type="text/javascript">
$(document).ready(function() {
$('a[href^="#"]').click(function(){
var el = $(this).attr('href');
$('body').animate({
scrollTop: $(el).offset().top}, 1000);
return false;
});
});
</script>
... то при клике на <li> перекидывает на ТОП страницы что не есть гуд
HTML-разметка:
<section>
<ul id="da-thumbs" class="da-thumbs">
<li class='small'>
<a href="#">
<img src="images/1.jpg" />
<div><span>Елизавета няша...</span></div>
</a>
</li>
<li class='small'>
<a href="#">
<img src="images/2.jpg" />
<div><span>Елизавета няша...</span></div>
</a>
</li>
<li class='small'>
<a href="#">
<img src="images/3.jpg" />
<div><span>Елизавета няша...</span></div>
</a>
</li>
... и так далее