Я создаю свое портфолио и хочу создать галерею для отображения своих проектов. У меня есть выбор из семи разделов, содержащих контент, который образует навигационный раздел моего веб-сайта с вкладками. Как и в случае с другими навигациями с вкладками, одновременно будет активен только один элемент div, содержащий содержимое. Однако, в отличие от других навигаций с вкладками, этот управляется PHP. Если определенный контент (в настоящее время установлен в функцию file_exists, но скоро будет контролироваться MySQL) доступен, div будет записан в навигацию и будет отображаться соответствующая ссылка. Если это не так, то ссылка будет скрыта и div не будет прописан. Требуемые файлы основаны на вызове $_GET, а требуемые файлы зависят от строки внутри моей переменной $_GET.
Каждая вкладка имеет уникальный идентификатор. В настоящее время (поскольку я не являюсь экспертом по Javascript) у меня есть опция «сброс», которая устанавливает стиль всех именованных div в «скрытый» стиль, прежде чем перевести выбранный div в «видимое» состояние.
Что я хочу сделать, если это возможно, так это:
Я хочу перейти от #div1 к #div2. Разделы 1, 2, 4 и 6 (для этого примера) активны. Я щелкаю ссылку, которая указывает моей странице отображать #div2 (функция в настоящее время говорит только скрыть ВСЕ div, а затем отобразить #div2, скрытие всех остальных div — это отдельная функция, которая вызывается внутри этой функции). #div1 в настоящее время виден.
- #div1 исчезнет
- #div2 исчезнет
Разделы 4 и 6 не будут затронуты. Разделы 3, 5 и 7 не будут затронуты, так как они (насколько это касается моей страницы) не существуют. Для этого примера каждое затухание может занять 3 секунды.
Я смутно знаю, что $('#div2').fadeIn(3000); будет представлять собой эффект постепенного появления для #div2, а аналог fadeOut() будет представлять собой постепенное исчезновение. Как мне использовать jQuery (у меня есть 1.5.2 на моем сайте), чтобы затухать #div1 и затухать #div2 БЕЗ воздействия на любой другой div, или проще сохранить код, поскольку он скрывает все мои div и просто добавить #div2? Пожалуйста, помните, я не являюсь экспертом по Javascript, я только начинаю, поэтому, пожалуйста, не оскорбляйте длину моего скрипта или мою неспособность понять что-то, что, как мне кажется, было бы таким простым.
Пожалуйста, помните, что в моей навигации есть до семи разделов. Сценарий должен найти видимый div на основе ссылки, по которой щелкнули, и затемнить его, затем постепенно добавить выбранный мной div, и он не должен касаться ни одного из оставшихся div.
Это достаточно легко понять и получить ответ?
РЕДАКТИРОВАТЬ @ 01:46 по Гринвичу, 30.04.2010
Спасибо, но это не похоже на то, что я хочу. Похоже, они бы работали, если бы было только два div, но помните, их может быть до семи, и ссылка должна знать, какой div виден, а какой нет.
В настоящее время у меня есть PHP-скрипт, который говорит: «Если этот файл существует, создайте этот div и примените к нему стиль 'visibleTab'. В противном случае сделайте это, но примените к нему стиль 'hiddenTab'». Мой код Javascript (теперь jQuery) выглядит следующим образом:
function resetTabs() {
$("#postersandprint").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#mobileapp").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#stylesheets").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#storyboards").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#motionpieces").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#interactives").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
$("#developmentwork").removeClass("tabs visibleTab").removeClass("hiddenTab").addClass("hiddenTab");
}
function showTab(tabname) {
resetTabs();
$('#'+tabname).fadeIn(3000);
$("#"+tabname).removeClass("hiddenTab").addClass("tabs visibleTab");
}
Принцип таков:
Моя ссылка имеет щелчок, который вызывает мою функцию showTab и помещает соответствующий идентификатор div внутри функции, например:
<a href="javascript:;" onclick="showTab('mobileapp');">Link</a>
Функция скрывает все элементы div, а затем исчезает в том, который называется «имя вкладки», в данном случае «мобильное приложение».
Я сказал каждой функции сброса удалить любой класс с именем «hiddenTab», а также любой класс с именем «visibleTab» и «вкладки» перед добавлением класса «hiddenTab» в качестве своего рода «отказоустойчивого» подхода. Я также сказал моей функции showTab явно удалить класс «hiddenTab» из моей вкладки, которую я хочу видеть, и добавить классы «вкладки» и «visibleTab». Я забыл, почему у меня два стиля, но я уверен, что причина придет ко мне.
Я хочу, чтобы мой скрипт jQuery знал, какой div виден, а какой не входит в список из семи. В качестве примера можно привести #div1 и #div2, но это может быть любой div из выбранного. Раньше, когда я использовал функцию document.getElementById, она работала отлично, я просто хотел добавить затухание в сценарий, чтобы он выглядел лучше. Теперь это работает, но только когда я один раз перебираю элементы div. После этого он просто добавляет мой div под видимый, а не скрывает их. Я знаю, что что-то упустил или где-то напутал, но что я пропустил? Где я накосячил?
