Показать один div, спрятав другой по клику

@rubankreativ · Регистрация: 05.05.2017

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

Здравствуйте. Прошу помощи ! Уже не первую неделю не могу решить проблему. Уже наверное всё облазил.
Нужен скрипт, по клику открывающий div, при этом закрывающий другой div.
Например:

HTML5    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
<div id=1 style="display:inline-block";>Текст, который показан <button>Заменить div id=1 на div id=2</button></div>
<div id=2 style="display:none";>Текст, который скрыт</div>
<div id=3 style="display:inline-block";>Текст, который показан <button>Заменить div id=3 на div id=4</button></div>
<div id=4 style="display:none";>Текст, который скрыт</div>
<div id=5 style="display:inline-block";>Текст, который показан <button>Заменить div id=5 на div id=6</button></div>
<div id=6 style="display:none";>Текст, который скрыт</div>
<div id=7 style="display:inline-block";>Текст, который показан <button>Заменить div id=7 на div id=8</button></div>
<div id=8 style="display:none";>Текст, который скрыт</div>

Помогите, я не знаю как написать скрипт

@Mailo · 28.05.2017, 22:01

JavaScript    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
$(document).ready(function() {
 
    $(".btn").click(function() {
        $(".div_1").css({"display":"none"});
        $(".div_2").css({"display":"block"});
    });
 
});

@j2FunOnly · 29.05.2017, 09:59

rubankreativ, AdHoc, применимо только к вашей разметке

JavaScript    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
$('button').click(function() {
  $('.show').hide();
  $(this).parent()
    .next('div')
    .addClass('show')
    .css({
      display: 'inline-block'
    });
});

@rubankreativ · 30.05.2017, 22:33 **[ТС]**

А кнопке какой код задать для запуска скрипта ?

@j2FunOnly · 02.06.2017, 08:29

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

А кнопке какой код задать для запуска скрипта ?

В коде уже всё указано. Подключаете jQuery и добавляете скрипт перед закрывающим тэгом </body>.

PHP/HTML    
        
            
                
                
                
                
            
        
    Скопировано
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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample document</title>
  </head>
  <body>
    <div id="1" style="display:inline-block">
      Текст, который показан <button>Заменить div id=1 на div id=2</button>
    </div>
    <div id="2" style="display:none">Текст, который скрыт</div>
    <div id="3" style="display:inline-block">
      Текст, который показан <button>Заменить div id=3 на div id=4</button>
    </div>
    <div id="4" style="display:none">Текст, который скрыт</div>
    <div id="5" style="display:inline-block">
      Текст, который показан <button>Заменить div id=5 на div id=6</button>
    </div>
    <div id="6" style="display:none">Текст, который скрыт</div>
    <div id="7" style="display:inline-block">
      Текст, который показан <button>Заменить div id=7 на div id=8</button>
    </div>
    <div id="8" style="display:none">Текст, который скрыт</div>
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
      $('button').click(function() {
        $('.show').hide()
          .removeClass('show');
 
        $(this).parent()
          .next('div')
          .addClass('show')
          .css({
            display: 'inline-block'
          });
        });
    </script>
  </body>
</html>

https://jsfiddle.net/7sk6vzph/

@rubankreativ · 03.06.2017, 09:25 **[ТС]**

Ещё раз здравствуйте. Я писал: заменяет один Div другим Div. То есть переключает видимость. По клику на кнопку Div, который спрятан показывается, а Div, который показан- прячется

@j2FunOnly · 05.06.2017, 14:12

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

По клику на кнопку Div, который спрятан показывается, а Div, который показан- прячется

По клику на кнопку найти родительский див и скрыть его, а следующий див отобразить.

JavaScript    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
$('button').click(function() {
  $(this).parent()
    .hide()
    .next()
    .show();
});

Новые блоги и статьи Все статьи Все блоги /
Линейное решение нелинейной задачи. Формулы от LM по моему решению пока не проверял. В итоговой её формуле видно её заблуждение. Hrethgir 10.04.2025 В продолжение Эта LM дала ответ похожий на нормальный. В комментриях мой комментарий - похоже она ошиблась с выведением итоговой формулы, но остальные проверю. Assistant qwen2. 5-14b-instruct . . . .	Переменные в Python py-thonny 10.04.2025 Переменная в программировании — это символическое имя, связанное с областью памяти, в которой хранится значение. Она позволяет получать доступ к данным через понятные человеку идентификаторы, а не. . .	Многопоточность в C#: Task и асинхронные операции UnmanagedCoder 10.04.2025 Многопоточность позволяет выполнять несколько операций одновременно, что важно для решения двух основных задач: повышения скорости выполнения вычислительно-сложных операций и сохранения отзывчивости. . .	Линейное решение не линейной задачи (емкость вычислений в сравнении с традиционными решениями пока не определена). Hrethgir 10.04.2025 В рамках предстоящих вычислений пришлось (да, я тоже знаю про корень числа, и про степеня, и прочие теоремы, но. . . ) найти способ нахождения отношения двух углов. . . .	Запуск контейнеров Docker на ARM64 Mr. Docker 09.04.2025 Появление таких решений, как Apple M1/ M2, AWS Graviton, Ampere Altra и Raspberry Pi, сделало использование ARM-систем обыденностью для многих разработчиков и DevOps-инженеров. При этом Docker,. . .
Vue SFC компонент на PHP с Fusion Jason-Webb 09.04.2025 PHP на сервере и JavaScript на клиенте — классическое сочетание, которое, несмотря на свою эффективность, создает определенный когнитивный диссонанс при разработке. В этом контексте появляются. . .	TypeScript vs JavaScript: Отличия и когда что использовать Reangularity 09.04.2025 JavaScript появился в 1995 году как творение Брендана Эйха и быстро стал основой интерактивности в вебе. За свою историю он прошел путь от простого языка для манипуляций с DOM до полноценной. . .	Подключение Kafka к Elasticsearch Codd 09.04.2025 Apache Kafka и Elasticsearch — две мощные технологии, которые при совместном использовании создают эффективную платформу для обработки и анализа данных в реальном времени. Kafka, выступая в роли. . .	Реализации таймеров в Unity GameUnited 09.04.2025 Время — важный ресурс любой игры. Разработка качественных игровых механик невозможна без грамотного управления временем, а таймеры выступают ключевым инструментом этого управления. Представьте себе. . .	Функции высшего порядка в JavaScript run.dev 09.04.2025 Функции высшего порядка представляют собой один из фундаментальных камней функционального программирования в JavaScript. По сути, это функции, которые либо принимают другие функции в качестве. . .

@rubankreativ 0 / 0 / 0 Регистрация: 05.05.2017 Сообщений: 10
	30.05.2017, 22:33 [ТС]
	А кнопке какой код задать для запуска скрипта ? 0

@rubankreativ 0 / 0 / 0 Регистрация: 05.05.2017 Сообщений: 10
	03.06.2017, 09:25 [ТС]
	Ещё раз здравствуйте. Я писал: заменяет один Div другим Div. То есть переключает видимость. По клику на кнопку Div, который спрятан показывается, а Div, который показан- прячется 0