Всплывающий по ссылке DIV с заменой. Криворукий!

@SaintSerg · Регистрация: 25.01.2014

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

Здравствуйте. Ситуация следующая, собственно видимо банальна, но по причине отсутствия знаний, не могу найти решение.
.......
Есть две текстовые ссылки (выделены красным).
Нажимаем на ссылку, появляется див с информацией (выделен красным), это вроде бы получилось.
......
Задача сделать так, что бы при нажатии на вторую ссылку, первый див с информацией закрывался и на его месте открывался второй.

Понимаю, что задача наверняка элементарная, но поскольку знаний нет, то и реализовать примеры с форума не могу.
В итоге сделал без использования javascript просто средствами HTML и CSS
Вот код:

HTML5
1
2
<p style="font-size: 36px;"><a href="#hball" onClick="document.getElementById('hiddball').style.display='block'; return false;">Тренинги для менеджеров</a></p>
<p style="font-size: 36px;"><a href="#" onClick="document.getElementById('hiddballl').style.display='block'; return false;">Тренинги для официантов</a></p>

......

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<span class="traning"><span style="font-size: 17pt; font-style: italic; font-style: bold; color: #ccc;">Описание тренинга для менеджеров</span><br><br>
<img src="images/man.jpg" style="float: left; padding: 3px 3px 3px;">Офигенские тренинги, на которых готовят, офигенских менеджеров, чтобы они офигенски управляля персоналом, который будет офигенски обслуживать гостей, а те в свою очередь будут офигенски платить. А тренинги эти проводит <a href="" return false;>Александр Геннадьевич Лянгузов</a>, профи и вообще.
<hr>
<a href="">Записаться на тренинг.</a><br>
<a href="" style="font-size: 13px;" onClick="document.getElementById('hiddball').style.display='none'; return false;" >Закрыть описание</a>
<hr></span>
</div>  
<div id="hiddballl" onClick="document.getElementById('hiddballl').style.display='none'; return false;" >
<span class="traning"><span style="font-size: 17pt; font-style: italic; font-style: bold; color: #ccc;">Описание тренинга для официантов</span><br><br>
<img src="images/man.jpg" style="float: left; padding: 3px 3px 3px;">Офигенские тренинги, на которых готовят, офигенских официантов, чтобы они офигенски обслуживали гостй, который будут офигенски платить.<a href="" return false;>Александр Геннадьевич Лянгузов</a> Офигенские тренинги, на которых готовят, офигенских официантов, чтобы они офигенски обслуживали гостй, который будут офигенски платить.
<hr>
<a href="">Записаться на тренинг.</a><br>
<a href="" style="font-size: 13px;" onClick="document.getElementById('hiddball').style.display='none'; return false;" >Закрыть описание</a>
<hr></span>

......
Подскажите пожалуйста как реализовать задачу!!!!! 12 часов привели вот к такому решению. В Javascript не соображаю совсем.

Благодарю за внимание!

@hrach333 · 25.01.2014, 17:49

Подойдет с jQuery? Если подойдет то могу побробовать сделать.

@SaintSerg · 25.01.2014, 17:54 **[ТС]**

Да мне, на чем угодно подойдет, главное, что бы работало. Буду очень признателен.

@hrach333 · 25.01.2014, 23:10

Я сделал, если я правильно понял. Я проверял у меня работает.

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
<html>
<head>
<!--Тут подключаю библиатеку jQuery-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <!-- Скрипт который будет убирать и показывать блоки-->
    <style>
        #hidd, #hiddballl {
            display: none; /* css стиль я их прячу а потом уже управляю с помощю js*/
        }
        
    </style>
    <script>
        $(document).ready(function(){
            $("#men").click(function(){ //выбираем объект с индификатором men, отслеживаем клик и выполняем функцию
                $("#hidd").css({'display':'block'});//тут задаем через любое свойство к примеру блочный
                if($("#hiddballl").length !=0){
                    $("#hiddballl").css({'display':'none'});//прячем если он сушествует
                }
            });
            $("#ofic").click(function(){ //выбираем объект с индификатором men, отслеживаем клик и выполняем функцию
                $("#hiddballl").css({'display':'block'});//тут задаем через любое свойство к примеру блочный
                if($("#hidd").length !=0){
                    $("#hidd").css({'display':'none'});//прячем если он сушествует
                }
            });
        });
            
        
    </script>
</head>
<body>
Задача пример 
<p style="font-size: 36px;"><a href="#" id="men">Тренинги для менеджеров</a></p><!--Сдесь я поменял индефикатор но можно поменять 
тогда не забудь поменять и в скрипте.
-->
<p style="font-size: 36px;"><a href="#" id="ofic">Тренинги для официантов</a></p>
<div id="hidd">
<span class="traning"><span style="font-size: 17pt; font-style: italic; font-style: bold; color: #ccc;">Описание тренинга для менеджеров</span><br><br>
<img src="https://www.cyberforum.ru/images/man.jpg" style="float: left; padding: 3px 3px 3px;">Офигенские тренинги, на которых готовят, офигенских менеджеров, чтобы они офигенски управляля персоналом, который будет офигенски обслуживать гостей, а те в свою очередь будут офигенски платить. А тренинги эти проводит <a href="" return false;>Александр Геннадьевич Лянгузов</a>, профи и вообще.
<hr>
<a href="">Записаться на тренинг.</a><br>
<a href="" style="font-size: 13px;"  >Закрыть описание</a>
<hr></span>
</div>  
<div id="hiddballl">
<span class="traning"><span style="font-size: 17pt; font-style: italic; font-style: bold; color: #ccc;">Описание тренинга для официантов</span><br><br>
<img src="https://www.cyberforum.ru/images/man.jpg" style="float: left; padding: 3px 3px 3px;">Офигенские тренинги, на которых готовят, офигенских официантов, чтобы они офигенски обслуживали гостй, который будут офигенски платить.<a href="" return false;>Александр Геннадьевич Лянгузов</a> Офигенские тренинги, на которых готовят, офигенских официантов, чтобы они офигенски обслуживали гостй, который будут офигенски платить.
<hr>
<a href="">Записаться на тренинг.</a><br>
<a href="" style="font-size: 13px;">Закрыть описание</a>
<hr></span>
</body>
</html>

@SaintSerg · 26.01.2014, 15:41 **[ТС]**

Благодарю тебя, добрый человек. Все работает. И все очень понятно, удобные комментарии.

Добавлено через 5 часов 57 минут
Все круто, еще раз спасибо. Единственное в ссылки добавил onclick="return fals;" а так вообще супер.

@hrach333 · 26.01.2014, 18:33

Пользуйся на здоровье ))

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@hrach333 12 / 12 / 2 Регистрация: 22.01.2014 Сообщений: 71
	25.01.2014, 17:49
	Подойдет с jQuery? Если подойдет то могу побробовать сделать. 0

@SaintSerg 0 / 0 / 0 Регистрация: 25.01.2014 Сообщений: 9
	25.01.2014, 17:54 [ТС]
	Да мне, на чем угодно подойдет, главное, что бы работало. Буду очень признателен. 0

@SaintSerg 0 / 0 / 0 Регистрация: 25.01.2014 Сообщений: 9
	26.01.2014, 15:41 [ТС]
	Благодарю тебя, добрый человек. Все работает. И все очень понятно, удобные комментарии. Добавлено через 5 часов 57 минут Все круто, еще раз спасибо. Единственное в ссылки добавил onclick="return fals;" а так вообще супер. 0

@hrach333 12 / 12 / 2 Регистрация: 22.01.2014 Сообщений: 71
	26.01.2014, 18:33
	Пользуйся на здоровье )) 0