11.03.2016, 12:39
|
 |
Кандидат Javascript-наук
|
|
Регистрация: 11.11.2015
Сообщений: 136
|
|
|
keystation,
Не совсем понятно, что должно поменяться в той ссылке.
Жму физ лицами или юр, одно и то же
|
|
11.03.2016, 14:25
|
|
Интересующийся
|
|
Регистрация: 10.03.2016
Сообщений: 14
|
|
Сообщение от AciDWarrioR
|
keystation,
Не знаю насколько вам это близко, но вот такой вариант накидал:
|
То есть чтобы изначально уже была какая то информация, но при нажатии заменялась. И наоборот. |
|
11.03.2016, 14:29
|
|
Интересующийся
|
|
Регистрация: 10.03.2016
Сообщений: 14
|
|
|
Сообщение от AciDWarrioR
|
keystation,
Не совсем понятно, что должно поменяться в той ссылке.
Жму физ лицами или юр, одно и то же
|
У меня это выглядит вот так:
Т.е. полностью меняется содержимое контейнера |
|
11.03.2016, 14:29
|
|
Кандидат Javascript-наук
|
|
Регистрация: 11.11.2015
Сообщений: 136
|
|
keystation,
Вам не кажется, что я уже все готовое вам дал?
В чем проблема, добавить начальные блоки
<div class="for_house">Товар 1</>
столько сколько вашей душе удобно? И при нажатии удалять эти элементы и добавлять нужные.
|
|
11.03.2016, 14:40
|
|
Кандидат Javascript-наук
|
|
Регистрация: 11.11.2015
Сообщений: 136
|
|
keystation,
В общем, делаете это так, я надеюсь вас уже не затруднит немного самому поработать?
На странице два блока <p> расположенные горизонтально и под ними то, количество товара, которые ему соответствует. У одного блока <p> стиль active у другого естественно нет. При нажатие на эти <p> убирается у другого класс active другому добавляется, ну и функцию по нажатию на блок я вам расписал довольно обширно, мне кажется не должно возникнуть проблемы.
Последний раз редактировалось AciDWarrioR, 11.03.2016 в 14:44.
|
|
11.03.2016, 14:44
|
|
Интересующийся
|
|
Регистрация: 10.03.2016
Сообщений: 14
|
|
|
Сообщение от AciDWarrioR
|
keystation,
В общем, делаете это так, я надеюсь вас уже не затруднит немного самому поработать?
На странице два блока <p> расположенные горизонтально. Один стиль active другой естественно нет. При нажатие на эти <p> убирается у другого класс active другому добавляется, ну и функцию по нажатию на блок я вам расписал довольно обширно, мне кажется не должно возникнуть проблемы.
|
Из предложенных вами функций доработать нужно последнюю? я правильно понял?
Простите за назойливость, но туго мне даются эти скрипты...  |
|
11.03.2016, 14:52
|
|
Кандидат Javascript-наук
|
|
Регистрация: 11.11.2015
Сообщений: 136
|
|
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>
|
|
11.03.2016, 15:13
|
|
Интересующийся
|
|
Регистрация: 10.03.2016
Сообщений: 14
|
|
|
Сообщение от AciDWarrioR
|
keystation,
Не особо правильно. Уже эти функции работают правильно, вам лишь только надо при начальном формировании HTML документа создать блоки. Даже если у вас они формируются динамически, ведь не проблема взять часть моего кода по созданию блоков и добавить, как только страница прогрузится?
|
Я понимаю что я вас достал, но я запутался еще больше. Скажите, в вашем случае при загрузке страницы изначально показывает текст из скрипта. Далее по нажатии кнопки 1 происходит его подмена из HTML class=for_house. А по кнопке 2, блок формируется скриптом?
Есть ли возможность просто менять по клику уже существующие блоки?
Например есть в документе:
<div class="for_house">Тут большой блок с группой товаров для дома, со своим стилем. По сути на пол экрана и с длинным кодом</div>
И есть:
<div class="for_office">А тут большой блок с группой товаров для офиса, со своим стилем. Так же на пол экрана и с длинным кодом</div>
При загрузке страницы пользователь сразу видит товары для дома и активную кнопку "Для дома" (с кнопкой все понял как сделать), но при этом блок Для офиса скрыт от пользователя. И при нажатии на "Для офиса" содержимое <div class="for_house"> просто заменяется на содержимое из <div class="for_office">. И соответственно пользователь может вернуться обратно на вкладку "Для дома".
Последний раз редактировалось keystation, 11.03.2016 в 15:15.
|
|
11.03.2016, 15:19
|
|
Кандидат Javascript-наук
|
|
Регистрация: 11.11.2015
Сообщений: 136
|
|
keystation,
|
Сообщение от keystation
|
|
Я понимаю что я вас достал
|
Нет, Вы меня не достали, но процесс обучения немного стопорится, меня больше напрягает, что Я не могу до Вас донести, то что вам нужно.
|
Сообщение от keystation
|
|
Есть ли возможность просто менять по клику уже существующие блоки?
|
Да можно. Вот рассудите сами: мы ведь можем весь ваш js код запихнуть в эту функцию? Конечно же можем, а значит просто при нажатии кнопки формируется эти блоки и этот код и добавляется на страницу. Либо мы можем скрыть этот div, который расположен на этом месте и сами функции будут скрывать и показывать нужный div, но это уже анимация.
|
|
11.03.2016, 15:26
|
|
Интересующийся
|
|
Регистрация: 10.03.2016
Сообщений: 14
|
|
|
Сообщение от AciDWarrioR
|
keystation,
Либо мы можем скрыть этот div, который расположен на этом месте и сами функции будут скрывать и показывать нужный div, но это уже анимация.
|
Может тогда это и нужно? Имеющийся код менять на другой код.
Просто никак не пойму. У меня есть страница на HTML уже сверстанная с группой товаров для дома, которую я просто хочу менять на том же месте на Для офиса в таком же дизайне. |
|
|
|
