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

@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);
      });       
  }

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

@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