Скрипт смены контента в 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>
|
Цитата:
|
keystation,
Не совсем понятно, что должно поменяться в той ссылке. Жму физ лицами или юр, одно и то же |
Цитата:
|
Вложений: 2
Цитата:
Т.е. полностью меняется содержимое контейнера |
keystation,
Вам не кажется, что я уже все готовое вам дал? В чем проблема, добавить начальные блоки <div class="for_house">Товар 1</>столько сколько вашей душе удобно? И при нажатии удалять эти элементы и добавлять нужные. |
keystation,
В общем, делаете это так, я надеюсь вас уже не затруднит немного самому поработать? На странице два блока <p> расположенные горизонтально и под ними то, количество товара, которые ему соответствует. У одного блока <p> стиль active у другого естественно нет. При нажатие на эти <p> убирается у другого класс active другому добавляется, ну и функцию по нажатию на блок я вам расписал довольно обширно, мне кажется не должно возникнуть проблемы. |
Цитата:
Простите за назойливость, но туго мне даются эти скрипты...:help: |
keystation,
Не особо правильно. Уже эти функции работают правильно, вам лишь только надо при начальном формировании HTML документа создать блоки. Даже если у вас они формируются динамически, ведь не проблема взять часть моего кода по созданию блоков и добавить, как только страница прогрузится? Вот два варианта: 1) Когда элементы грузятся с html файла:
<!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 class="for_house">Товар для дома 1</div>
<div class="for_house">Товар для дома 2</div>
<div class="for_house">Товар для дома 3</div>
<div class="for_house">Товар для дома 4</div>
</div>
</body>
</html>
<script>
function for_house(){
$('.for_house').remove();
$('.for_office').remove();
count = 0;
for (i=0; i<4; 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(){
$('.for_office').remove();
$('.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>
2) Когда элементы формируются JS:
<!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 onload="for_house()">
<button id="button1" onclick="for_house()">Товары для дома</button>
<button id="button1" onclick="for_office()">Товары для офиса</button>
<div id="div1">
</div>
</body>
</html>
<script>
function for_house(){
$('.for_house').remove();
$('.for_office').remove();
count = 0;
for (i=0; i<4; 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(){
$('.for_office').remove();
$('.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>
|
Цитата:
Есть ли возможность просто менять по клику уже существующие блоки? Например есть в документе: <div class="for_house">Тут большой блок с группой товаров для дома, со своим стилем. По сути на пол экрана и с длинным кодом</div> И есть: <div class="for_office">А тут большой блок с группой товаров для офиса, со своим стилем. Так же на пол экрана и с длинным кодом</div> При загрузке страницы пользователь сразу видит товары для дома и активную кнопку "Для дома" (с кнопкой все понял как сделать), но при этом блок Для офиса скрыт от пользователя. И при нажатии на "Для офиса" содержимое <div class="for_house"> просто заменяется на содержимое из <div class="for_office">. И соответственно пользователь может вернуться обратно на вкладку "Для дома". |
keystation,
Цитата:
Цитата:
|
Цитата:
Просто никак не пойму. У меня есть страница на HTML уже сверстанная с группой товаров для дома, которую я просто хочу менять на том же месте на Для офиса в таком же дизайне. |
keystation,
Я не вижу, как вы пишите свой код. Вы говорите тот же дизайн, который формируется (я на это надеюсь) классами, почему не добавить в сгенерированные блоки этот класс. Скиньте свою html заготовку, дайте хоть глянуть, ведь я все это писал по сути по вашим кратким вопросам. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<style>
#clickme{cursor:pointer}
#clickme1{cursor:pointer}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="clickme">Нажми - Для офиса</div>
<div id="clickme1">Нажми - Для дома</div>
<div id="robot">Для дома</div>
<div id="result" hidden="true">Для офиса</div>
<script>
$('#clickme').click(function(){
$('#robot').fadeOut('slow', function() {
$('#result').fadeIn();
});
});
$('#clickme1').click(function(){
$('#result').fadeOut('slow', function() {
$('#robot').fadeIn();
});
});
</script>
</body>
</html>
|
keystation,
Я думаю, все решено? Вам дальнейших успехов и побольше читайте, а на форуме спрашивайте непонятные для Вас случаи. |
Цитата:
|
| Часовой пояс GMT +3, время: 12:36. |