Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.03.2016, 10:02
Интересующийся
Отправить личное сообщение для keystation Посмотреть профиль Найти все сообщения от keystation
 
Регистрация: 10.03.2016
Сообщений: 14

Скрипт смены контента в 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

Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 11.03.2016, 10:08
Аватар для AciDWarrioR
Кандидат Javascript-наук
Отправить личное сообщение для AciDWarrioR Посмотреть профиль Найти все сообщения от AciDWarrioR
 
Регистрация: 11.11.2015
Сообщений: 136

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>
Ответить с цитированием
  #3 (permalink)  
Старый 11.03.2016, 10:20
Интересующийся
Отправить личное сообщение для keystation Посмотреть профиль Найти все сообщения от keystation
 
Регистрация: 10.03.2016
Сообщений: 14

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

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

Последний раз редактировалось keystation, 11.03.2016 в 10:23.
Ответить с цитированием
  #4 (permalink)  
Старый 11.03.2016, 10:22
Аватар для AciDWarrioR
Кандидат Javascript-наук
Отправить личное сообщение для AciDWarrioR Посмотреть профиль Найти все сообщения от AciDWarrioR
 
Регистрация: 11.11.2015
Сообщений: 136

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

Последний раз редактировалось AciDWarrioR, 11.03.2016 в 10:24.
Ответить с цитированием
  #5 (permalink)  
Старый 11.03.2016, 10:29
Интересующийся
Отправить личное сообщение для keystation Посмотреть профиль Найти все сообщения от keystation
 
Регистрация: 10.03.2016
Сообщений: 14

Сообщение от AciDWarrioR Посмотреть сообщение
keystation,

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

Да
Простите, не совсем понял
Ответить с цитированием
  #6 (permalink)  
Старый 11.03.2016, 10:35
Аватар для AciDWarrioR
Кандидат Javascript-наук
Отправить личное сообщение для AciDWarrioR Посмотреть профиль Найти все сообщения от AciDWarrioR
 
Регистрация: 11.11.2015
Сообщений: 136

Сообщение от 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
возможно ли сделать эту смену информации плавной?
Ответ: ДА.
Ответить с цитированием
  #7 (permalink)  
Старый 11.03.2016, 10:48
Интересующийся
Отправить личное сообщение для keystation Посмотреть профиль Найти все сообщения от keystation
 
Регистрация: 10.03.2016
Сообщений: 14

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

Не пойму как его приспособить в такой ситуации.
Ответить с цитированием
  #8 (permalink)  
Старый 11.03.2016, 10:58
Аватар для AciDWarrioR
Кандидат Javascript-наук
Отправить личное сообщение для AciDWarrioR Посмотреть профиль Найти все сообщения от AciDWarrioR
 
Регистрация: 11.11.2015
Сообщений: 136

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:01.
Ответить с цитированием
  #9 (permalink)  
Старый 11.03.2016, 11:17
Аватар для AciDWarrioR
Кандидат Javascript-наук
Отправить личное сообщение для AciDWarrioR Посмотреть профиль Найти все сообщения от AciDWarrioR
 
Регистрация: 11.11.2015
Сообщений: 136

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>
Ответить с цитированием
  #10 (permalink)  
Старый 11.03.2016, 12:11
Интересующийся
Отправить личное сообщение для keystation Посмотреть профиль Найти все сообщения от keystation
 
Регистрация: 10.03.2016
Сообщений: 14

Сообщение от AciDWarrioR Посмотреть сообщение
keystation,
Не знаю насколько вам это близко, но вот такой вариант накида
Такой вариант очень хорош. Скажите, а как сделать чтобы заменялся код, уже готовый? Со своим оформлением и стилями. Как по ссылке в первом посте.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
обработчик событий для динамически добавленных элементов Tecvid Events/DOM/Window 28 25.06.2018 13:49
За деньги: Кто напишет скрипт подмены контента для мобильных? paradox989 Мобильный JavaScript 2 14.08.2015 16:56
Разработка с помощью Jquery. Скрипт смены иконки погоды 2K2L Мобильный JavaScript 1 06.04.2015 18:02
Подрузка контента из нескольких файлов по клику. MasterDmx Элементы интерфейса 4 01.07.2013 10:44
Скрипт смены картинок - помогите размножить profi555 Ваши сайты и скрипты 6 02.07.2010 23:32