Скрытые от глаз DIV
Здравствуйте. Может кто нибуть помочь в решении такого вопроса. Нужно устроить так что бы было три ряда и в каждом ряду допустим по три кнопки и при нажатии на одну из кнопок должен открываться div если в этом же ряду нажать на другую кнопку открытый div должен закрыться и открыться другой соответствующий кнопке.
Два следующих ряда должны действовать так же и не зависеть друг от друга ну то есть если я в первом ряду кнопку нажал открывается div то во втором ряду при нажатии кнопки откроется новый div но в первом ряду не должен закрываться Очень надеюсь на вашу помощь |
|
Вот что то близко но не то мне не меню нужно. Вот смотрите есть у меня картинка допустим «Кукла» и у куклы есть платья, туфли и шляпки разных вариантов. И мне нужно при нажатии на кнопку менять ей наряд. Т.е. к каждой кнопке привязана картинка и при нажатии одна картинка закрывалась и открывалась другая.
|
Цитата:
|
Примерно как то так...
<script type="text/javascript">
<!--
function viewdiv(id){
var el=document.getElementById(id);
if(el.style.display=="block"){
el.style.display="none";
} else {
el.style.display="block";
}
}
//-->
</script>
<script type="text/javascript">
<!--
function viewdiv2(id){
var el=document.getElementById(id);
if(el.style.display=="block"){
el.style.display="none";
} else {
el.style.display="block";
}
}
//-->
</script>
<script type="text/javascript">
<!--
function viewdiv3(id){
var el=document.getElementById(id);
if(el.style.display=="block"){
el.style.display="none";
} else {
el.style.display="block";
}
}
//-->
</script>
<a href="javascript:void(0);" onclick="viewdiv('mydiv');">Кукла</a>
<div id="mydiv" style="display:none;"><img src="images/model/1.png"></div>
<a href="javascript:void(0);" onclick="viewdiv2('mydiv2');">Зеленое платье</a>
<div id="mydiv2" style="display:none;"><img style="margin-top: -727px;" src="images/model/4.png"></div>
<a href="javascript:void(0);" onclick="viewdiv3('mydiv3');">Красное платье</a>
<div id="mydiv3" style="display:none;"><img style="margin-top: -745px;" src="images/model/5.png"></div>
|
alexgrenn,
сама кукла то почему исчезает? |
Ну здесь при нажатии она появляется и уже после остается когда происходит выбор платья. Просто получается так что при нажатии на кнопку div открывается и наслаевается на уже имеющийся а хотелось бы что бы открывался один и закрывался другой да еще чтобы было несколько рядов выбора инвентаря
|
игра одень куклу
alexgrenn, внимательно изучите код ... вам нужно только правильно расставить классы и дата-атрибут и добавить в css новый класс.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div.dress, div.shoes {
display: none;
}
div.show {
display: block;
}
</style>
</head>
<body>
<a href="#" class="open" data-cls="dress">Зеленое платье</a>
<div class="dress" ><img>Зеленое платье</div>
<a href="#" class="open" data-cls="dress">Красное платье</a>
<div class="dress" ><img>Красное платье</div>
<a href="#" class="open" data-cls="shoes">Зеленые туфли</a>
<div class="shoes" ><img>Зеленые туфли</div>
<a href="#" class="open" data-cls="shoes">Красные туфли</a>
<div class="shoes" ><img>Красные туфли</div>
<script>
window.addEventListener("DOMContentLoaded", function() {
var open = document.querySelectorAll(".open"),
obj = {};
[].forEach.call(open, function(a) {
var cls = a.dataset.cls;
obj[cls] !== undefined ? obj[cls]++ : obj[cls] = 0;
var i = obj[cls];
cls = document.querySelectorAll("div." + cls);
a.addEventListener("click", function(event) {
event.preventDefault();
[].forEach.call(cls, function(div, k) {
div.classList[k == i ? "toggle" : "remove"]("show")
})
})
})
});
</script>
</body>
</html>
|
Громадное Вам спасибо. То что и было нужно.
|
| Часовой пояс GMT +3, время: 12:56. |