Форум

keystation · #1 (**permalink**) 11.03.2016, 10:02

Добрый день, друзья. Помогите пожалуйста решить проблемку.
Со скриптами до сего не имел дело, но встала необходимость сделать смену контента в контейнере по кнопке. То есть по кнопке 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 · #2 (**permalink**) 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 · #3 (**permalink**) 11.03.2016, 10:20

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

keystation,

Все оказалось гораздо проще

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

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

AciDWarrioR · #4 (**permalink**) 11.03.2016, 10:22

keystation,

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

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

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

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

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

Да

keystation · #5 (**permalink**) 11.03.2016, 10:29

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

keystation,

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

Да

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

AciDWarrioR · #6 (**permalink**) 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 · #7 (**permalink**) 11.03.2016, 10:48

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

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

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

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

AciDWarrioR · #8 (**permalink**) 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 · #9 (**permalink**) 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 · #10 (**permalink**) 11.03.2016, 12:11

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

keystation,
Не знаю насколько вам это близко, но вот такой вариант накида

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

Форум

Справочник

Discord чат

Курсы javascript