Скрипт смены контента в 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 Заранее спасибо! |
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,
Цитата:
Цитата:
|
Цитата:
|
Цитата:
<!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>
Второй вопрос: Цитата:
|
Цитата:
То есть у меня по сути предполагается 2 блока товаров "для дома" и "для офиса". Две одноименных кнопки соответственно. Но сами блоки товаров - это около 20 строк кода. И по задумке выводиться они должны в одном и том же месте, как в вашем первом примере. Один блок кода заменять другой. Не пойму как его приспособить в такой ситуации. |
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();
|
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>
|
Цитата:
|
| Часовой пояс GMT +3, время: 02:21. |