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 уже сверстанная с группой товаров для дома, которую я просто хочу менять на том же месте на Для офиса в таком же дизайне. |
| Часовой пояс GMT +3, время: 07:15. |