Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Скрипт смены контента в Div (https://javascript.ru/forum/events/61836-skript-smeny-kontenta-v-div.html)

keystation 11.03.2016 10:02

Скрипт смены контента в Div
 
Добрый день, друзья. Помогите пожалуйста решить проблемку.
Со скриптами до сего не имел дело, но встала необходимость сделать смену контента в контейнере по кнопке. То есть по кнопке 1 показать одну информацию, по кнопке 2 на том же месте другую информацию.
Голова додумалась только до такой функции.

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>


<script>
$(function(){
$("#button2").click(function(){
$("#div1").fadeOut(400);
$("#div2").fadeIn(400);
});
$("#button1").click(function(){
$("#div2").fadeOut(400);
$("#div1").fadeIn(400);
});
});
</script>


<body>
<div>
	<a id="div1">Текст 1</a>
	<a id="div2" hidden="true">Текст 2</a>
</div>
	<a id="button1" href="#">Текст 1</a>
	<a id="button2" href="#">Текст 2</a>
</body>


Однако при таком раскладе на долю секунды элементы отображаются все вместе друг за другом (смотря как поставить их).
Как сделать так, чтобы второй элемент сразу появлялся на месте первого? То есть просто плавно заменял его и по клику смена происходила в обоих направлениях.
В качестве примера могу привести сайт (правда на нем смена контента происходит резко) http://urbah.ru

Заранее спасибо!

AciDWarrioR 11.03.2016 10:08

keystation,
<!DOCTYPE html>
<html lang="en">
<head>
	<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<div>
	<a id="div1">Текст 1</a>
</div>
	<button id="button1" onclick="Text1()">Текст 1</button>
	<button id="button2" onclick="Text2()">Текст 2</button>
</body>
</html>
<script>
function Text1(){
	$('#div1').html("Текст 1");
}
function Text2(){
	$('#div1').html("А это Текст 2");
}
</script>

keystation 11.03.2016 10:20

Цитата:

Сообщение от AciDWarrioR (Сообщение 410632)
keystation,

Все оказалось гораздо проще :) Спасибо большое.
Только теперь возник вопрос, как вместо текста поместить целый блок?
И возможно ли сделать эту смену информации плавной?

По сути мне нужно сменять по кнопкам два больших блока с информацией

AciDWarrioR 11.03.2016 10:22

keystation,
Цитата:

Сообщение от keystation
Только теперь возник вопрос, как вместо текста поместить целый блок?

Вставить после
Цитата:

Сообщение от keystation
И возможно ли сделать эту смену информации плавной?

Да

keystation 11.03.2016 10:29

Цитата:

Сообщение от AciDWarrioR (Сообщение 410638)

Простите, не совсем понял :(

AciDWarrioR 11.03.2016 10:35

Цитата:

Сообщение от keystation
Простите, не совсем понял

Вы по ссылке прошли? Если хотите вставить целый блок можно сделать вот так:
<!DOCTYPE html>
<html lang="en">
<head>
	<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<div>
	<a id="div1">Текст 1</a>
</div>
	<button id="button1" onclick="Text1()">Вставим новый блок абзац</button>
</body>
</html>
<script>
function Text1(){
	$('#div1').append("<p>Теперь здесь новый блок. Здорово, не правда ли?</p>");
}
</script>

Второй вопрос:
Цитата:

Сообщение от keystation
возможно ли сделать эту смену информации плавной?

Ответ: ДА.

keystation 11.03.2016 10:48

Цитата:

Сообщение от AciDWarrioR (Сообщение 410640)
Вы по ссылке прошли? Если хотите вставить целый блок можно сделать вот так:

Здорово. Но что-то не ясно как при таком раскладе сделать заменяющийся контент?
То есть у меня по сути предполагается 2 блока товаров "для дома" и "для офиса". Две одноименных кнопки соответственно. Но сами блоки товаров - это около 20 строк кода. И по задумке выводиться они должны в одном и том же месте, как в вашем первом примере. Один блок кода заменять другой.

Не пойму как его приспособить в такой ситуации.

AciDWarrioR 11.03.2016 10:58

keystation,
Вот, друг, надо всегда начинать задачу с правильной постановки условий. Вы сначала спросили одно, потом другое, а оказалось не совсем нужное?)
Создайте при помощи js нужное количество блоков для каждого случая. Установите им класс, к примеру: for_home и for_office. И добавляйте их куда вам угодно.
Example (для 10 товаров для дома):
function for_house(){
	for (i=0; i<10; i++){
	var div = document.createElement('div');
	div.classList.add("for_home");
	var posleChegoDobavit = document.getElementById("div1");
	posleChegoDobavit.appendChild(div);
        div.innerHTML = "здесь помещаем в блок, что нам нужно!"
}
}

Ну и конечно же в начале этих функций нужно удалять все блоки с противоположным классом. Т.Е. если вы нажали for_house(), то следует удалить товары для офиса:
$('.for_office').remove();

AciDWarrioR 11.03.2016 11:17

keystation,
Не знаю насколько вам это близко, но вот такой вариант накидал:
<!DOCTYPE html>
<html lang="en">
<head>
	<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	.for_house{
		background-color: yellow;
		width: 150px;
		height: 50px;
		border: 1px solid black;
	}
	.for_office{
		background-color: green;
		width: 160px;
		height: 50px;
		border: 1px solid black;
	}
</style>
<body>
	<button id="button1" onclick="for_house()">Товары для дома</button>
	<button id="button1" onclick="for_office()">Товары для офиса</button>
	<div id="div1"></div>
</body>
</html>
<script>
function for_house(){
	if ($('.for_office')){
		$('.for_office').remove();
	}
	count = 0;
	for (i=0; i<10; i++){
		var div = document.createElement('div');
		div.classList.add("for_house");
		var posleChegoDobavit = document.getElementById("div1");
		posleChegoDobavit.appendChild(div);
		count = i +1;
		div.innerHTML = "товар для дома " + count; 
	}
}
function for_office(){
	if($('.for_house')){
		$('.for_house').remove();
	}
	count = 0;
	for (i=0; i<5; i++){
		var div = document.createElement('div');
		div.classList.add("for_office");
		var posleChegoDobavit = document.getElementById("div1");
		posleChegoDobavit.appendChild(div);
		count = i +1;
		div.innerHTML = "товар для офиса " + count; 
	}
}
</script>

keystation 11.03.2016 12:11

Цитата:

Сообщение от AciDWarrioR (Сообщение 410654)
keystation,
Не знаю насколько вам это близко, но вот такой вариант накида

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


Часовой пояс GMT +3, время: 05:30.