Как сделать, чтобы два блока сменяли друг друга при клике?

@lololop · Регистрация: 19.02.2013

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

Здравствуйте. Помогите, пожалуйста решить проблему.
Нужно, чтобы при нажатии на кнопку, один блок всегда заменялся другим, и при нажатии на другую кнопку, возвращался первый блок.
Код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function() {
 
               $("#main").click(function() {
               $("div.news-detail").replaceWith(news);                  
            });   
            
   var image = $("div#kart").wrap().html();
   var anons = $(".news-detail span").wrap().html();
   var data = $("#data-detail").wrap().html(); 
   var detail = $(".news-detail").detach(); 
   var news = $(".new");   
   $("div.center-b div.brown").append(image);
   $(".center-b p").append(anons+"...");
   $(".center-b .data").append(data); 
 
               $("#news").click(function() {
                $(".new").replaceWith(detail);   
            });
               
});

html

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
<div class="new">
      <div class="left-b">
         <div class="brown"></div>
         <div class="data"></div>         
         <p></p>
         <div class="detail"></div>
      </div>
      <div class="center-b">
         <div class="brown"></div>
         <div class="data"></div>
         Новости
         <p></p>
         <div class="detail" id="news">Подробно</div>
      </div>
      <div class="right-b">
         <div class="brown"></div>
         <div class="data"></div>         
         <p></p>
         <div class="detail"></div>         
      </div>
   </div>
   <div class="news-detail">
<h1><span>Заголовок</span></h1>
<div id="kart"><img src="images/vi.jpg"></div>
<p>текст текст текст текст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст текст</p>
<p id="data-detail">07.02.2013</p>
<div class="detail" id="main">Назад</div>
 
   </div>

Один раз это срабатывает, но, вернувшись к блоку .new, второй раз уже нельзя заменить его на .news-detail . А как сделать так, чтобы можно было постояно менять их туда и обратно?

@newaitix · 19.02.2013, 20:44

onClick="this.style = z-index: /*то значение которое нужно*/"

@Soldado · 19.02.2013, 21:05

Вставил код - он без стилей и не могу понять какой результат хотите получить. Кода у Вас много, а надо то (как вы сказали на словах) всего то кликнуть по Подробно и показать детали и спрятать новости, и наоборот, кликнуть Назад - спрятать детали и показать новости. Простите, возможно неправильно понял

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
$(document).ready(function(){
  
   $("#main").click(function() {
               $(".new").css('display','block');
                $(".news-detail").css('display','none');                      
            });   
            
   
 
               $("#news").click(function() {
                   $(".news-detail").css('display','block');
                    $(".new").css('display','none');   
            });
 
             
 });/*end  ready*/
 </script>

@lololop · 19.02.2013, 21:12 **[ТС]**

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

Вставил код - он без стилей и не могу понять какой результат хотите получить. Кода у Вас много, а надо то (как вы сказали на словах) всего то кликнуть по Подробно и показать детали и спрятать новости, и наоборот, кликнуть Назад - спрятать детали и показать новости. Простите, возможно неправильно понял

Да, именно так нужно, спрятать новости и показать детали и наоборот. А нельзя это сделать без display: none и z-index ? То есть как бы изъять из кода ненужный блок до нажатия кнопки, а не стиль его менять.
Мой код срабатывает, но почему-то только один раз. Я в этом деле совсем чайник, но может кто-то найдет ошибку?

@Soldado · 19.02.2013, 21:38

Ну если удалять, тогда так (только вставлять не в body, а родительский блок - вы его не показали, если нет то создайте )

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
$(document).ready(function(){
 var objNew=$('.new');
 var objNewsDetail=$('.news-detail');
    objNewsDetail.detach();
// кликаем Подробно  
    $("body").on ('click','#news',function() {
                     objNew.detach();  
                     objNewsDetail.appendTo('body');
            });     
            
 // кликаем Назад  
 $("body").on ('click','#main',function() {
               objNew.appendTo('body');
               objNewsDetail.detach();
                                    
            });              
 });/*end  ready*/
 </script>

@Zazu · 20.02.2013, 12:17

Можно сделать это разными способами:
1 - использовать replaceWith() как вы и хотели.
2 - можно использовать эффект появления и исчезания fadeIn() и fadeOut().
3 - можно использовать эффект слайд-шоу, slideDown() и slideUp().
4 - можно использовать эффект анимации, пример: .animation({/*тут прописываеш css который будет изменяться*/ opacity: "0"}, 3000/*время выполнения анимации*/)
5 - или же просто изменять css с помощью jQuery!
Выбирайте!))

@lololop · 20.02.2013, 12:26 **[ТС]**

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

Ну если удалять, тогда так (только вставлять не в body, а родительский блок - вы его не показали, если нет то создайте )

Спасибо. А без привлечения родительского блока нельзя это сделать?

Можно сделать это разными способами:
1 - использовать replaceWith() как вы и хотели.
2 - можно использовать эффект появления и исчезания fadeIn() и fadeOut().
3 - можно использовать эффект слайд-шоу, slideDown() и slideUp().
4 - можно использовать эффект анимации, пример: .animation({/*тут прописываеш css который будет изменяться*/ opacity: "0"}, 3000/*время выполнения анимации*/)
5 - или же просто изменять css с помощью jQuery!
Выбирайте!))

1 вариант предпочтительней всего, но как сделать это что он всегда работал?
4 и 5 точно не подходят.

@Zazu · 20.02.2013, 12:31

replaceWith() будет заменять один код на другой!
Смотри тут

@lololop · 20.02.2013, 13:41 **[ТС]**

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

replaceWith() будет заменять один код на другой!
Смотри тут

Это понятно, но почему мой код не работает? Почему срабатывает только один раз: новости - детали - новости ?
Вот, убрала все лишнее из кода

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() {
 
               $("#main").click(function() {
               $("div.news-detail").replaceWith(news);                  
            });   
 
   var detail = $(".news-detail").detach(); 
   var news = $(".new");   
 
               $("#news").click(function() {
                $(".new").replaceWith(detail);   
            });
               
});

@Zazu · 20.02.2013, 17:31

lololop, сделай вместо $("#main").click(function() {..., обработчик событий!
Тоесть наподобие этого:

JavaScript
1
2
3
4
5
6
7
8
function NewsDetail() {
        var detail = $(".news-detail").detach();
    $("#news").replaceWith(detail);   
}
function News() {
        var news = $(".new");
    $("#news").replaceWith(news);   
}

А в нужные кнопки добавляй атрибут onclick="NewsDetail()" и onclick="News()"
Я пробовал так, вроде работало!

Добавлено через 1 минуту
только убедись что переменные detail и news не будут иметь пустых значений!

@lololop · 20.02.2013, 19:33 **[ТС]**

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

lololop, сделай вместо $("#main").click(function() {..., обработчик событий!
Тоесть наподобие этого:
[JS]function NewsDetail() {
var detail = $(".news-detail").detach();
$("#news").replaceWit

Нет, ничего не получается. При нажатии на кнопку ничего не происходит. Может что не так делаю?
Консоль браузера ошибку выдает такую:
ReferenceError: NewsDetail is not defined
[Прерывать на этой ошибке]

NewsDetail()

И потом .news-detail изначально должен быть скрыт, а в этом случае, он показан.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() {
 
 
function NewsDetail() {
        var detail = $(".news-detail").detach();
    $(".new").replaceWith(detail);   
}
function News() {
        var news = $(".new");
    $(".news-detail").replaceWith(news);   
}
            
               
});

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
<div class="new">
      <div class="left-b">
         <div class="brown"></div>
         <div class="data"></div>         
         <p></p>
         <div class="detail"></div>
      </div>
      <div class="center-b">
         <div class="brown"></div>
         <div class="data"></div>
         Новости
         <p></p>
         <div class="detail" id="news"  onclick="NewsDetail()">Подробно</div>
      </div>
      <div class="right-b">
         <div class="brown"></div>
         <div class="data"></div>         
         <p></p>
         <div class="detail"></div>         
      </div>
   </div>
   <div class="news-detail">
<h1><span>Заголовок</span></h1>
<div id="kart"><img src="https://www.cyberforum.ru/images/vi.jpg"></div>
<p>текст текст текст текст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст текст</p>
<p id="data-detail">07.02.2013</p>
<div class="detail" id="main"  onclick="News()">Назад</div>
 
   </div>

@Zazu · 21.02.2013, 02:52

JavaScript
1
2
3
4
5
6
7
8
9
$(document).ready(function() {
 
 
function NewsDetail() {
    $(".new").replaceWith('<div class="news-detail"><h1><span>Заголовок</span></h1><div id="kart"><img src="https://www.cyberforum.ru/images/vi.jpg"></div><p>текст текст текст текст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст текст</p><p id="data-detail">07.02.2013</p><div class="detail" id="main"  onclick="News()">Назад</div></div>');   
}
function News() {
    $(".news-detail").replaceWith('<div class="new"><div class="left-b"><div class="brown"></div><div class="data"></div><p></p><div class="detail"></div></div><div class="center-b"><div class="brown"></div><div class="data"></div>Новости<p></p><div class="detail" id="news"  onclick="NewsDetail()">Подробно</div></div><div class="right-b"><div class="brown"></div><div class="data"></div><p></p><div class="detail"></div></div></div>');   
}

А в документе прописывайте то что должно появиться изначально!
Тоесть:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="new">
      <div class="left-b">
         <div class="brown"></div>
         <div class="data"></div>         
         <p></p>
         <div class="detail"></div>
      </div>
      <div class="center-b">
         <div class="brown"></div>
         <div class="data"></div>
         Новости
         <p></p>
         <div class="detail" id="news"  onclick="NewsDetail()">Подробно</div>
      </div>
      <div class="right-b">
         <div class="brown"></div>
         <div class="data"></div>         
         <p></p>
         <div class="detail"></div>         
      </div>
   </div>

Добавлено через 1 минуту
Должно работать, проверенно, если не будет, значит путь к файлу с jQuery не правильно прописан!

Добавлено через 5 минут
Ошибка, $(document).ready(function() {.....});
Просто вот так:

JavaScript
1
2
3
4
5
6
function NewsDetail() {
    $(".new").replaceWith('<div class="news-detail"><h1><span>Заголовок</span></h1><div id="kart"><img src="https://www.cyberforum.ru/images/vi.jpg"></div><p>текст текст текст текст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст текст</p><p id="data-detail">07.02.2013</p><div class="detail" id="main"  onclick="News()">Назад</div></div>');   
}
function News() {
    $(".news-detail").replaceWith('<div class="new"><div class="left-b"><div class="brown"></div><div class="data"></div><p></p><div class="detail"></div></div><div class="center-b"><div class="brown"></div><div class="data"></div>Новости<p></p><div class="detail" id="news"  onclick="NewsDetail()">Подробно</div></div><div class="right-b"><div class="brown"></div><div class="data"></div><p></p><div class="detail"></div></div></div>');   
}

Вот это не правильно:

JavaScript
1
2
3
4
5
6
7
8
9
$(document).ready(function() {
 
  function NewsDetail() {
      $(".new").replaceWith('<div class="news-detail"><h1><span>Заголовок</span></h1><div id="kart"><img src="https://www.cyberforum.ru/images/vi.jpg"></div><p>текст текст текст текст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст тексттекст текст текст</p><p id="data-detail">07.02.2013</p><div class="detail" id="main"  onclick="News()">Назад</div></div>');   
  }
  function News() {
      $(".news-detail").replaceWith('<div class="new"><div class="left-b"><div class="brown"></div><div class="data"></div><p></p><div class="detail"></div></div><div class="center-b"><div class="brown"></div><div class="data"></div>Новости<p></p><div class="detail" id="news"  onclick="NewsDetail()">Подробно</div></div><div class="right-b"><div class="brown"></div><div class="data"></div><p></p><div class="detail"></div></div></div>');   
  }
});

@lololop · 21.02.2013, 13:54 **[ТС]**

да, это работает. А без прописывания кода html в скрипте значит никак нельзя?
там ведь еще кучу переменных нужно будет использовать, например дата в блоке <p id="data-detail">07.02.2013</p> новостей должна будет заполняться из блока <div class="detail"></div> деталей, анонс - тоже самое, можно будет в этом случае так сделать?
и почему здесь не нужно это $(document).ready(function() {.....}); ?

@Zazu · 21.02.2013, 14:40

Если вы хотите что бы всё работало без дополнительных загрузок, то здесь без использования css не обойтись(по крайней мере я не знаю как это можно ещё сделать)!
Или же можно использовать функцию загрузки страницы .load()!
Создаёте дополнительный документ например "news_detail.html", и в нужный div загружаете этот файл, вот так:

JavaScript
1
2
3
function News() {
      $(".news-detail").load('news_detail.html');  
  }

Так же можно передать GET и POST!
Пример передачи GET:

JavaScript
1
2
3
4
function News() {
      var data = "test=" + /*тут может быть значение или переменная*/ + "&test2=" + value ;
      $(".news-detail").load('news_detail.html', data);  
  }

Пример передачи POST:

JavaScript
1
2
3
4
function News() {
      var data = { test:  /*тут может быть значение или переменная*/, test2: value, test3: "value", test4: $('#test').val() } ;
      $(".news-detail").load('news_detail.html', data);  
  }

@lololop · 21.02.2013, 16:47 **[ТС]**

function NewsDetail() {
$(".new").load('news_detail.html');
}

А как после загрузки нового документа вернуть обратно изначальное содержимое блока .new? Получается, что нужно создавать отдельные файлы и для деталей и для новостей или опять же использовать .replaceWith и задавать html код в скрипте?

HTML5
1
2
3
4
5
6
7
8
9
<div class="new">
        <div class="center-b">
            <div id="brown"></div>
            <div class="data">21.02</div>
            Новости
            <p></p>
            <div class="detail" onclick="NewsDetail()" id="news">Подробно</div>
        </div>
    </div>

И еще, можно ли содержимое какого-то элемента внутри блока .new (например <div class="data">21.02</div>) отобразить на загруженной в блок странице (news_detail.html, когда она появится в блоке .new) в определенном месте, то есть чтобы оно автоматически там появлялось

вроде того

Java
1
2
var data = $(".data").wrap().html(); 
$("#data-detail").append(data);

#data-detail - блок на странице news_detail.html

хотя, конечно желательно, чтобы было наоборот, то есть данные со страницы news_detail.html показывались в изначальном блоке .new , так можно сделать?
про GET и POST не особо поняла.

@Zazu · 21.02.2013, 17:07

или сохранить в переменной всё содержимое а потом просто вставить обратно, либо создать ещё один документ и загружать его!

Добавлено через 1 минуту

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

И еще, можно ли содержимое какого-то элемента внутри блока .new (например <div class="data">21.02</div>) отобразить на загруженной в блок странице (news_detail.html, когда она появится в блоке .new) в определенном месте, то есть чтобы оно автоматически там появлялось

Я же вам сказал что можно посылать GET и POST запросы загружаемой странице!

@lololop · 21.02.2013, 17:48 **[ТС]**

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

JavaScript
1
2
3
4
function NewsDetail() {
var data = $(".data").wrap().html(); 
      $(".new").load('news.htm', data);       
  }

@Zazu · 21.02.2013, 19:04

во первых, уберите .wrap(), во вторых надо посылать не просто переменныу, а пару "имя=значение", если запрос будет отправляться в формате GET то надо прописывать так - var data = "name=" + $(".data").html();, если POST var data = { name: $(".data").html() };то так (вместо слова data можно использовать любое другое, по этому имени потом на загружаемой странице нужно принимать данные!
Пишите JS так:

JavaScript
1
2
3
4
function NewsDetail() {
var data = { name: $(".data").html() }; 
      $(".new").load('news.htm', data);       
}

А в загружаемом файле принимаете эти данные:

PHP
1
$data = $_POST['name'];

и вставляете куда нужно.

@lololop · 22.02.2013, 15:44 **[ТС]**

То есть вот так вставлять:

PHP
1
2
3
<?php
$data = $_POST['name'];
?>

?
Ну а если php не поддерживается?

@Zazu · 23.02.2013, 21:21

Если не поддерживается, тогда без загрузки страниц сделайте, или в JS в переменных сохраните то что вам нужно, а потом в нужное место вставьте.
Например:

JavaScript
1
2
3
4
5
6
7
8
9
function NewsDetail() {
var data = $(".data").wrap().html(); 
var name1 = $("#val1").html();
var name2 = $("#val2").html();
      $(".new").load('news.htm', data, function() {
          $("#val3").html(name1);
          $("#val4").html(name2);
      });       
  }

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@newaitix 0 / 0 / 0 Регистрация: 18.02.2013 Сообщений: 6
	19.02.2013, 20:44
	onClick="this.style = z-index: /то значение которое нужно/" 0

@Zazu 24 / 24 / 8 Регистрация: 27.02.2012 Сообщений: 492
	20.02.2013, 12:17
	Можно сделать это разными способами: 1 - использовать replaceWith() как вы и хотели. 2 - можно использовать эффект появления и исчезания fadeIn() и fadeOut(). 3 - можно использовать эффект слайд-шоу, slideDown() и slideUp(). 4 - можно использовать эффект анимации, пример: *.animation({/тут прописываеш css который будет изменяться/ opacity: "0"}, 3000/время выполнения анимации/)* 5 - или же просто изменять css с помощью jQuery! Выбирайте!)) 0

@Zazu 24 / 24 / 8 Регистрация: 27.02.2012 Сообщений: 492
	20.02.2013, 12:31
	replaceWith() будет заменять один код на другой! Смотри тут 0

@lololop 0 / 0 / 0 Регистрация: 19.02.2013 Сообщений: 74
	21.02.2013, 13:54 [ТС]
	да, это работает. А без прописывания кода html в скрипте значит никак нельзя? там ведь еще кучу переменных нужно будет использовать, например дата в блоке <p id="data-detail">07.02.2013</p> новостей должна будет заполняться из блока <div class="detail"></div> деталей, анонс - тоже самое, можно будет в этом случае так сделать? и почему здесь не нужно это $(document).ready(function() {.....}); ? 0