Всплывающий по ссылке 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

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

Новые блоги и статьи Все статьи Все блоги /
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .

@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