Я честно сделал все сам! вот мой код - посмотрите
<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, время: 09:42. |