Я честно сделал все сам! вот мой код - посмотрите
<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> ... и так далее |
Цитата:
|
на <a> привязан элемент анимации (серая плашка), при наведении появляющаяся. А вот как пустую гиперссылку прописать не придумал я... Прописывал на #portfolio чтобы экран на фотогалерее фокусировался, но не работает окаянный скрипт первый тогда... Прямо как у Йоды получилось :)
|
href="javascript:" Хотя почему Цитата:
|
Цитата:
А как код, то? Не усложнил ли я его ненужными условиями? |
<script type="text/javascript">
$(document).ready(function() {
$('li').click(function() {
$('li').removeClass('big'); // Убираем у всех класс "большой"
$('li').addClass('small'); // Присваиваем всем класс "маленький"
$(this).addClass('big'); // Ставим текущему класс "большой"
});
});
</script>
Вот так по-моему наряднее? |
Вроде должно работать
<script type="text/javascript">
$(document).ready(function() {
$('li').click(function(e) {
e.preventDefault();
if ($(this).hasClass('big')) { // если открыт
// просто закрываем
$(this).removeClass('big'); // Убираем класс "большой"
} else { // если он закрыт
// вероятно есть открытый
// закрываем вероятно открытые
$('li.small').removeClass('big'); // Убираем у всех класс "большой"
// открываем текущий
$(this).addClass('big'); // Ставим текущему класс "большой"
}
});
});
</script>
Зачем удалять или добавлять класс small ? переопределяй стили и ок |
а если сократить то можно и так :)
(function(f){
f('li').on('click', function () {
f(this).toggleClass('big').siblings().removeClass('big');
});
}(jQuery));
|
$('a[href^="#"]') -когда делаешь так, будь готов к тому что придется делать костыли потом.
Почему бы минимально не персонализировать свой обработчик? Что бы он охватывал нужную часть интерфейса а не все подряд - $('.anchor') - вот один класс "якорей" и никаких проблем Кроме того в разметке какую роль выполняет тег a? Если роль контейнера то используй div, если совсем уж нет возможности, то по краqней мере убрать у него атрибут href |
Цитата:
Цитата:
Как лучше, в порядке приоритета: 1) Использовать <button> 2) Использовать <a href="javascript:"> 3) Использовать <span tabindex="0">, но придется самому навешивать обработчик keydown:keyCode=13, вызывающий this.click() (для ссылок и кнопок за нас это делает браузер) |
| Часовой пояс GMT +3, время: 02:30. |