Смена контента при наведении курсора на меню

@polisanov · Регистрация: 15.08.2012

Студворк — интернет-сервис помощи студентам

Добрый день, уважаемые знатоки

В процессе работы возникла такая проблема, нужно как-то реализовать смену контента при наведении курсора на пункты меню.

PS: В JS разбираюсь очень плохо

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
<div class="contacts">
<h3>Контакты</h3>
<ul class="contact-nav">
    <li class="sales">
        <a href="#">Продажи</a>
        <div class="contact-info">
            <address>Адрес компании: г. Москва, Успенское шоссе 1</address>
            <dl class="info">
                <dt class="contact-phone">Телефон</dt>
                <dd class="contact-phone-num">+7(499) 600-00-00</dd>
            </dl>
        </div>
        <img src="img/contact-map.gif" alt="" />
    </li>
    <li class="service">
           <a href="#">Сервис</a>
        <div class="contact-info-1">
            <address>Адрес компании: г. Москва, Успенское шоссе 2</address>
            <dl class="info">
                <dt class="contact-phone">Телефон</dt>
                <dd class="contact-phone-num">+7(499) 640-34-21</dd>
 
            </dl>
        </div>
        <img src="img/contact-map.gif" alt="" />
    </li>
    <li class="zavod">
            <a href="#">Завод</a>
        <div class="contact-info-2">
            <address>Адрес компании: г. Москва, Успенское шоссе 3</address>
            <dl class="info">
                <dt class="contact-phone">Телефон</dt>
                <dd class="contact-phone-num">+7(499) 600-02-01</dd>
            </dl>
        </div>
        <img src="img/contact-map.gif" alt="" />
    </li>
</ul>
</div>

@Schtrich · 15.08.2012, 06:56

непонятно какого только контента...

@polisanov · 15.08.2012, 14:26 **[ТС]**

Всего на странице 3 пункта меню: Продажи, Сервис, Завод. А под контентом подразумевается блоки с классами contact-info, contact-info-1, contact-info-2. Нужно как-то сделать так, чтобы при наведении на анкор появлялся именно тот блок, который соответствует пункту меню, на который наведен курсор.

@Soldado · 15.08.2012, 15:28

Hover не очень хорошо выглядит, ссылка узкая, малейший дребизг и блок мелькает, смотрите здесь.
Можно клик использовать как здесь.
P.S.Все коды видны в исходном коде представленных страниц.

@polisanov · 15.08.2012, 15:57 **[ТС]**

Огромное спасибо) А как сделать так, чтобы контент менялся справа (как на скрине)?

@Soldado · 15.08.2012, 17:27

Можно вот так.

Меню не такое как на скриншоте - это уже вопросы оформления.

@polisanov · 04.09.2012, 20:46 **[ТС]**

А как можно сделать так, чтобы при открытии страницы по умолчанию был открыт какой-то определенный раздел?

@Soldado · 04.09.2012, 21:50

Вначале скрипта добавьте эти две строки:

JavaScript
1
2
var info = $('.contact-info ').html();//или .contact-info-1 или .contact-info-2
$("#info").html(info).css('border','1px solid #097509');

@polisanov · 04.09.2012, 22:31 **[ТС]**

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
<ul>
                            <li>
                                <a href="#">ТД</a>
                                <div class="info">
                                    <address>
                                        <strong>Телефон:</strong><br>
                                        +7(499) 641-44-111
                                    </address>
                                    <address>
                                        <strong>E-mail:</strong><br>
                                        <a href="mailto:#">info@123.ru</a>
                                    </address>
                                    <address>
                                        <em>Адрес компании: г.Москва</em>
                                    </address>
                                    <img src="img/tpl/contact-map.gif" alt="">
                                </div>
                            </li>
                            <li>
                                <a href="#">Сервис</a>
                                    <div class="info">
                                        <address>
                                            <strong>Телефон:</strong><br>
                                            +7(499) 641-115-5585
                                        </address>
                                        <address>
                                            <strong>E-mail:</strong><br>
                                            <a href="mailto:#">info@123.ru</a>
                                        </address>
                                        <address>
                                            <em>Адрес компании: г.Москва,</em>
                                        </address>
                                        <img src="img/tpl/contact-map.gif" alt="">
                                    </div>
                            </li>
                            <li>
                                <a href="#">Завод</a>
                                <div class="info">
                                    <address>
                                        <strong>Телефон:</strong><br>
                                        +7(499) 641-001-11
                                    </address>
                                    <address>
                                        <strong>E-mail:</strong><br>
                                        <a href="mailto:#">info@123.ru</a>
                                    </address>
                                    <address>
                                        <em>Адрес компании: г.Москва, </em>
                                    </address>
                                    <img src="img/tpl/contact-map.gif" alt="">
                                </div>
                            </li>
                        </ul>

Сейчас разметка имеет такой вид, и происходит смена контента по клику

JavaScript
1
2
3
4
5
6
7
8
        <script type="text/javascript">
            $(function(){
                $(".contacts .info").prev('a').click(
                    function (){
                        $('.contacts div').hide(100);$(this).next().show(500);}
                    )
            });
        </script>

Попробовал добавить эти две строчки, но ничего не работает

@Soldado · 06.09.2012, 14:19

Сообщение от polisanov

Попробовал добавить эти две строчки, но ничего не работает

Те две строчки - это я для того варианта, где в отдельном окне информация выводится.

А для представленного варианта:

JavaScript
1
2
3
4
5
6
7
8
9
<script type="text/javascript">
            $(function(){
            $(".contacts .info").eq(0).css('display','block');
                $(".contacts .info").prev('a').click(
                    function (){
                        $('.contacts div').hide(100);$(this).next().show(500);}
                    )
            });
        </script>

Изначально будет открыта первая ссылка.
Если нужно, чтобы открыты были вторая или третья, то в третьей строке для eq(...), в скобках 1 или 2 - соответственно.

@polisanov · 24.09.2012, 22:33 **[ТС]**

Сообщение от Soldado

Те две строчки - это я для того варианта, где в отдельном окне информация выводится.

А для представленного варианта:

JavaScript
1
2
3
4
5
6
7
8
9
<script type="text/javascript">
            $(function(){
            $(".contacts .info").eq(0).css('display','block');
                $(".contacts .info").prev('a').click(
                    function (){
                        $('.contacts div').hide(100);$(this).next().show(500);}
                    )
            });
        </script>

Изначально будет открыта первая ссылка.
Если нужно, чтобы открыты были вторая или третья, то в третьей строке для eq(...), в скобках 1 или 2 - соответственно.

А как можно использовать в этой разметке скрипта яндекс карты или google maps?
PS:Почему-то все карты, которые я пробовал не хотят работать внутри этого скрипта

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@Schtrich weboman 210 / 195 / 63 Регистрация: 13.08.2010 Сообщений: 1,531 Записей в блоге: 6
	15.08.2012, 06:56
	непонятно какого только контента... 0

@polisanov 1 / 1 / 0 Регистрация: 15.08.2012 Сообщений: 27
	15.08.2012, 14:26 [ТС]
	Всего на странице 3 пункта меню: Продажи, Сервис, Завод. А под контентом подразумевается блоки с классами contact-info, contact-info-1, contact-info-2. Нужно как-то сделать так, чтобы при наведении на анкор появлялся именно тот блок, который соответствует пункту меню, на который наведен курсор. 0

@Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4
	15.08.2012, 15:28
	Hover не очень хорошо выглядит, ссылка узкая, малейший дребизг и блок мелькает, смотрите здесь. Можно клик использовать как здесь. P.S.Все коды видны в исходном коде представленных страниц. 1

@polisanov 1 / 1 / 0 Регистрация: 15.08.2012 Сообщений: 27
	15.08.2012, 15:57 [ТС]
	Огромное спасибо) А как сделать так, чтобы контент менялся справа (как на скрине)? 0

@Soldado 901 / 833 / 198 Регистрация: 28.06.2012 Сообщений: 1,607 Записей в блоге: 4
	15.08.2012, 17:27
	Можно вот так. Меню не такое как на скриншоте - это уже вопросы оформления. 1

@polisanov 1 / 1 / 0 Регистрация: 15.08.2012 Сообщений: 27
	04.09.2012, 20:46 [ТС]
	А как можно сделать так, чтобы при открытии страницы по умолчанию был открыт какой-то определенный раздел? 0