Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.86/7: Рейтинг темы: голосов - 7, средняя оценка - 4.86
2 / 2 / 0
Регистрация: 14.01.2013
Сообщений: 76

Отображение diva

15.02.2013, 14:40. Показов 1435. Ответов 13
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Друзья, помогите сделал какую-то ерунду. Как, при нажатии на пункт меню, скрывались старые картинки и отображались новые?
http://www.masterwatt.ru/page/obekty-novye#
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
15.02.2013, 14:40
Ответы с готовыми решениями:

Обтекание diva c position:absolute
Добрый вечер Форумчане! При изучении резиновой верстки, возник вот такой вопрос: Есть div с position:ablolute, (эт который с рамкой...

Вызов diva через Javascript
Добрый день, уважаемые пользователи форума! Озадачился вопросом, искал ответ в интернете, нашел конечно, но написано было не очень понятно...

Исчезновение букв при столкновении с гарницей diva
Здравствуйте, уважаемые форумчане! Вопрос такой: Если див имеет длину х пикселей, то буквы внутри данного элемента при...

13
 Аватар для Soldado
901 / 833 / 198
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
15.02.2013, 16:22
Там у Вас много разных скриптов подключено. Если есть возможность, то выложите html-код меню и скрипт, отвечающий за вывод картинок.
1
2 / 2 / 0
Регистрация: 14.01.2013
Сообщений: 76
15.02.2013, 16:30  [ТС]
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
$(document).ready(function(){
$.easing.def = "easeInOutQuad";
$('div.pics1 img').toggle('slow').hide();
$('div.pics2 img').toggle('slow').hide();
$('li.button a').click(function(e){
var dropDown = $(this).parent().next();
$('.dropdown').not(dropDown).slideUp('slow');
dropDown.slideToggle('slow');
e.preventDefault();
})
});
 
</script>
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
    <li class="menu">
    <ul>
        <li class="button"><a href="#" class="box1"><input onclick="$('div.pics1 img').toggle('slow');" value="Жилые помещения" style="cursor: pointer; color: rgb(128, 128, 128); font-family: Arial,Helvetica,sans-serif; font-size: 17px;" /></a></li>
        <li class="dropdown">
        <ul>
            <li><a href="#">Москва</a></li>
            <li><a href="#">Самара</a></li>
            <li><a href="#">Пермь</a></li>
            <li><a href="#">Краснодар</a></li>
        </ul>
        </li>
    </ul>
    </li>
    <li class="menu">
    <ul>
        <li class="button"><a href="#" class="box2"><input onclick="$('div.pics2 img').toggle('slow');" value="Бизнес центры" style="cursor: pointer; color: rgb(128, 128, 128); font-family: Arial,Helvetica,sans-serif; font-size: 17px;" /></a></li>
        <li class="dropdown">
        <ul>
            <li><a href="#">Москва</a></li>
            <li><a href="#">Самара</a></li>
            <li><a href="#">Пермь</a></li>
            <li><a href="#">Краснодар</a></li>
        </ul>
        </li>
    </ul>
    </li>
    <li class="menu">
    <ul>
        <li class="button"><a href="#" class="box3"><input onclick="$('div.pics1 img').toggle('slow');" value="Спортивные объекты" style="cursor: pointer; color: rgb(128, 128, 128); font-family: Arial,Helvetica,sans-serif; font-size: 17px;" /></a></li>
        <li class="dropdown">
        <ul>
            <li><a href="#">Москва</a></li>
            <li><a href="#">Самара</a></li>
            <li><a href="#">Пермь</a></li>
            <li><a href="#">Краснодар</a></li>
        </ul>
        </li>
    </ul>
    </li>
    <li class="menu">
    <ul>
        <li class="button"><a href="#" class="box4"><input onclick="$('div.pics4 img').toggle('slow');" value="Гостиницы" style="cursor: pointer; color: rgb(128, 128, 128); font-family: Arial,Helvetica,sans-serif; font-size: 17px;" /></a></li>
        <li class="dropdown">
        <ul>
            <li><a href="#">Москва</a></li>
            <li><a href="#">Самара</a></li>
            <li><a href="#">Пермь</a></li>
            <li><a href="#">Краснодар</a></li>
        </ul>
        </li>
    </ul>
    </li>
    <li class="menu">
    <ul>
        <li class="button"><a href="#" class="box5"><input onclick="$('div.pics5 img').toggle('slow');" value="Музеи" style="cursor: pointer; color: rgb(128, 128, 128); font-family: Arial,Helvetica,sans-serif; font-size: 17px;" /></a></li>
        <li class="dropdown">
        <ul>
            <li><a href="#">Москва</a></li>
            <li><a href="#">Самара</a></li>
            <li><a href="#">Пермь</a></li>
            <li><a href="#">Краснодар</a></li>
        </ul>
        </li>
    </ul>
    </li>
    <li class="menu">
    <ul>
        <li class="button"><a href="#" class="box6"><input onclick="$('div.pics6 img').toggle('slow');" value="Разное" style="cursor: pointer; color: rgb(128, 128, 128); font-family: Arial,Helvetica,sans-serif; font-size: 17px;" /></a></li>
        <li class="dropdown">
        <ul>
            <li><a href="#">Москва</a></li>
            <li><a href="#">Самара</a></li>
            <li><a href="#">Пермь</a></li>
            <li><a href="#">Краснодар</a></li>
        </ul>
        </li>
    </ul>
    </li>
</ul>
<div style="height: 100%" class="separ1 fleft">&nbsp;</div>
<div class="pics1"><img width="200" height="200" src="http://www.masterwatt.ru/files/imagecache/image_preview_small/picture/object/402-ofisnoe-pomeshchenie-kompanii-german-centre-moscow-tehnoparka-nagatino-zil/402-ofisnoe-pomeshchenie-kompanii-german-centre-moscow-tehnoparka-nagatino-zil-1376.jpg" alt="" />            <img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/404-vell-haus-na-dubrovke/404-vell-haus-na-dubrovke-1380.jpg" alt="" />                <img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/350-zhiloy-kompleks-g-samara/350-zhiloy-kompleks-g-samara-1035.jpg" alt="" />          <img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/262-kompleks-otdyha-zavidovo/262-kompleks-otdyha-zavidovo-427.jpg" alt="" />           <img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/264-kurkino-5-mikrorayon/264-kurkino-5-mikrorayon-1447.jpg" alt="" />          <img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/266-zhk-pervomayskoe/266-zhk-pervomayskoe-419.jpg" alt="" />           <img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/268-well-hause-na-leninskom/268-well-hause-na-leninskom-426.jpg" alt="" />             <img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/271-zhiloy-kompleks-dobryninskiy/271-zhiloy-kompleks-dobryninskiy-408.jpg" alt="" />           <img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/267-tver-yuzhnyy-mikrorayon/267-tver-yuzhnyy-mikrorayon-423.jpg" alt="" /></div>
<div class="pics2"><img width="200" height="200" src="http://www.masterwatt.ru/files/imagecache/image_preview_small/picture/object/402-ofisnoe-pomeshchenie-kompanii-german-centre-moscow-tehnoparka-nagatino-zil/402-ofisnoe-pomeshchenie-kompanii-german-centre-moscow-tehnoparka-nagatino-zil-1376.jpg" alt="" />            <img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/401-ofisnyy-centr-staryy-dvor-4-y-golutvinskiy-d-18-str-1-2/401-ofisnyy-centr-staryy-dvor-4-y-golutvinskiy-d-18-str-1-2-1375.jpg" alt="" />                <img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/269-biznes-centr-fabrika-stanislavskogo/269-biznes-centr-fabrika-stanislavskogo-409.jpg" alt="" />                         <img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/263-bashnya-federacii-moskva-siti/263-bashnya-federacii-moskva-siti-422.jpg" alt="" /></div>
<div class="pics3"><img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/273-sportivnyy-kompleks-krylatskoe/273-sportivnyy-kompleks-krylatskoe-415.jpg" alt="" />            <img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/272-fizkulturno-ozdorovitelnyy-kompleks/272-fizkulturno-ozdorovitelnyy-kompleks-410.jpg" alt="" />                 <img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/276-golf-klub-moscow-country-club/276-golf-klub-moscow-country-club-418.jpg" alt="" /></div>
<div class="pics4"><img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/270-gostinica-leningradskaya/270-gostinica-leningradskaya-416.jpg" alt="" />            <img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/275-otel-ararat-park-hayatt-moskva/275-otel-ararat-park-hayatt-moskva-1382.jpg" alt="" />                  <img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/281-gostinichnyy-kompleks-izmaylovo/281-gostinichnyy-kompleks-izmaylovo-412.jpg" alt="" /></div>
<div class="pics5"><img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/403-dom-muzey-i-glazunova-moskovskaya-usadba/403-dom-muzey-i-glazunova-moskovskaya-usadba-1377.jpg" alt="" />               <img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/278-yusupovskiy-dvorec/278-yusupovskiy-dvorec-424.jpg" alt="" />               <img width="200" height="200" src="http://www.masterwatt.ru/files/imagecache/image_preview_small/picture/object/400-gosudarstvennyy-akademicheskiy-bolshoy-teatr-rossii/400-gosudarstvennyy-akademicheskiy-bolshoy-teatr-rossii-1374.jpg" alt="" /></div>
<div class="pics6"><img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/400-gosudarstvennyy-akademicheskiy-bolshoy-teatr-rossii/400-gosudarstvennyy-akademicheskiy-bolshoy-teatr-rossii-1374.jpg" alt="" />             <img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/405-kontrolno-dispetcherskiy-punkt-kdp-mezhdunarodnogo-aeroporta-sheremetevo/405-kontrolno-dispetcherskiy-punkt-kdp-mezhdunarodnogo-aeroporta-sheremetevo-1379.jpg" alt="" />                  <img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/265-aviacionnyy-angar-v-aeroportu-vnukovo/265-aviacionnyy-angar-v-aeroportu-vnukovo-407.jpg" alt="" />             <img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/277-svyato-nikolo-shartomskiy-monastyr/277-svyato-nikolo-shartomskiy-monastyr-417.jpg" alt="" />           <img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/279-torgovo-razvlekatelnyy-kompleks-hl/279-torgovo-razvlekatelnyy-kompleks-hl-421.jpg" alt="" />           <img width="200" height="200" src="http://www.masterwatt.ru/files/picture/object/282-rechnoy-kolesnyy-parohod-km-stanyukovich/282-rechnoy-kolesnyy-parohod-km-stanyukovich-1373.jpg" alt="" /></div>
<p>&nbsp;</p>
В js не особо понимаю но думаю что мне надо брать картинки из одного дива и перемещать их в какой-то единый див, только как это реализовать не понимаю
0
 Аватар для Soldado
901 / 833 / 198
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
15.02.2013, 18:18
Цитата Сообщение от Samokhiniu Посмотреть сообщение
В js не особо понимаю но думаю что мне надо брать картинки из одного дива и перемещать их в какой-то единый див, только как это реализовать не понимаю
Нужно все дивы прятать в стилях , а по клику - прятать все, кроме нужного, а его показывать либо прятать в зависимости от того был он (нужный див) виден или нет.

Сначала не об этом, а о вёрстке:
HTML5
1
2
</ul>
<div style="height: 100%" class="separ1 fleft">&nbsp;</div>
Строка 81 - лишний </ul> и непонятный блок высотой 100%. Может он и нужен - я не вижу всей картины, тогда пропустим.

С вёрсткой меню вы усложнили вместо того, чтобы стилизировать li - вы в него запихнули и ссылку и инпут, непойму зачем, сразу всем li задали бы общий стиль, который вынесли бы в header или в отдельный файл стилей.

HTML5
1
2
3
4
5
6
<li class="button">
 < a href="#" class="box1">
    <input onclick="$('div.pics1 img').toggle('slow');" value="Жилые помещения" 
    style="cursor: pointer; color: rgb(128, 128, 128); font-family: Arial,Helvetica,sans-serif; font-size: 17px;" />
 </a>
</li>

Зачем так много разных классов, ведь класс можно применять к группе однотипных элементов.

Дайте всем ссылкам общий класс, например:
HTML5
1
class="box"
А дивам с картинками:
HTML5
1
class="pics"
Уберите все onclick, а вместо этого запишите всего три строчки в код клика по ссылке:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('li.button a').click(function(e){
var dropDown = $(this).parent().next();
$('.dropdown').not(dropDown).slideUp('slow');
dropDown.slideToggle('slow');
e.preventDefault();
 
/*добавленный код  Soldado*/
var indexBox=$(this).index('.box');// получаем порядковый номер ссылки
// убираем все дивы с картинками, кроме дива с таким же порядковым номером:
$('.pics').not($('.pics').eq(indexBox)).css('display','none');
// в зависимости от того был ли блок виден или нет делаем чтобы стал невиден или виден соответственно
$('.pics').eq(indexBox).toggle('slow')
 
 
});
Если учтёте всё вышесказанное, то код сократится в несколько раз.

Ну и демо-страница (в ней убрал пустой блок высотой 100%)
1
2 / 2 / 0
Регистрация: 14.01.2013
Сообщений: 76
18.02.2013, 15:29  [ТС]
Огромнейшее спасибо за помощь.

Добавлено через 4 часа 22 минуты
А может еще подскажите как отсюда анимацию убрать?
0
 Аватар для Soldado
901 / 833 / 198
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
18.02.2013, 15:59
В строке 12 уберите 'slow'.
JavaScript
1
$('.pics').eq(indexBox).toggle()
1
2 / 2 / 0
Регистрация: 14.01.2013
Сообщений: 76
18.02.2013, 16:26  [ТС]
Цитата Сообщение от Soldado Посмотреть сообщение
В строке 12 уберите 'slow'.
JavaScript
1
$('.pics').eq(indexBox).toggle()
да вот все равно выпрыгивает
http://www.masterwatt.ru/objects
0
 Аватар для Soldado
901 / 833 / 198
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
18.02.2013, 16:40
Как-то они у Вас снизу появляются. Такое впечатление, что блок с картинками изначально находится внизу, а по клику занимает новое положение. Это так задумано?
Попробуйте заменить строку 12 на
JavaScript
1
2
3
var oDis=$('.pics').eq(indexBox).css('display');
if(oDis=="block")$('.pics').eq(indexBox).css('display','none');
else $('.pics').eq(indexBox).css('display','block');
Это точно отображает без эффектов.
1
2 / 2 / 0
Регистрация: 14.01.2013
Сообщений: 76
18.02.2013, 16:46  [ТС]
Цитата Сообщение от Soldado Посмотреть сообщение
Как-то они у Вас снизу появляются. Такое впечатление, что блок с картинками изначально находится внизу, а по клику занимает новое положение. Это так задумано?
Попробуйте заменить строку 12 на
JavaScript
1
2
3
var oDis=$('.pics').eq(indexBox).css('display');
if(oDis=="block")$('.pics').eq(indexBox).css('display','none');
else $('.pics').eq(indexBox).css('display','block');
Это точно отображает без эффектов.
Не, так не задумано. Анимация теперь сверху-вниз)
0
 Аватар для Soldado
901 / 833 / 198
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
18.02.2013, 17:25
У меня вот так.
Это не анимация - это проблема с вёрсткой, нужно завернуть все блоки с картинками в один общий див и поместить его туда куда нужно, чтобы блок фиксированно занимал определённое место. А затем в нём по клику показываем по очереди блоки с картиками - тогда ничего не будет скакать и появляться сниокуда.
Для отладки задайте блоку какой-то бордер и размеры и посмотрите, где он находится. Сейчас блоки class="pics" у Вас удалены из документа, а по клику раздвигают всё и уберите margin-top для них. Кажется так
1
2 / 2 / 0
Регистрация: 14.01.2013
Сообщений: 76
19.02.2013, 12:08  [ТС]
Большое спасибо, разобрался, проблема была в выравнивании меню и так по мелочи
0
2 / 2 / 0
Регистрация: 14.01.2013
Сообщений: 76
26.02.2013, 10:07  [ТС]
а можете еще подсказать, как отобразить вместо пустых окон какой-то див (чтоб лист пустым не был)
0
 Аватар для Soldado
901 / 833 / 198
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
26.02.2013, 12:30
Вы имеете в виду первоначальное заполнение? Поставьте какой нибудь фон для блока. Пусть себе будет какая-то картинка в тему. При клике по ссылке - поверх фона будут открываться блоки с картинками. Этим блокам нужно задать белый фон, чтобы они этим фоном полностью перекрывали первоначальную картинку-фон.
1
2 / 2 / 0
Регистрация: 14.01.2013
Сообщений: 76
27.02.2013, 12:15  [ТС]
Цитата Сообщение от Soldado Посмотреть сообщение
Вы имеете в виду первоначальное заполнение? Поставьте какой нибудь фон для блока. Пусть себе будет какая-то картинка в тему. При клике по ссылке - поверх фона будут открываться блоки с картинками. Этим блокам нужно задать белый фон, чтобы они этим фоном полностью перекрывали первоначальную картинку-фон.
Да, но тут же без нового дива не обойтись(в который влезет пустой блок со ссылкой), ведь так?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
27.02.2013, 12:15
Помогаю со студенческими работами здесь

Есть два Diva
Добрый день. Извините за такой вопрос, но все таки может кто подскажет. У меня есть 2 diva , Один к примеру &lt;div class='st1'&gt; и...

Скрипт для растяжки DIVa
Доброе утро, не знаю там ли тему создал или нет, но может кто подскажет, Не получется сделать div резиновым по высоте, то есть в див...

вывести цвет diva в 16ричной системе
alert(div.style.backgroundColor); выводит в форме rgb(x, x, x); вывести цвет diva в 16ричной системе

Наложение Diva поверх другого diva
Помогите уже час думаю как сделать не получается.

Ширина diva
Здравствуйте. Не задается длинна дива указанного на рисунке, как была 66 пикселей так и осталась, а мне нужно 100. Подскажите пожалуйста в...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
14
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru