|
Закрытие и открытие дива по клику
Добрый вечер! Есть скрипт:
var text = 0;
function _click(id)
{
if (text != id)
{
//close text
if (text != 0)
{
if (document.getElementById('item'+text))
document.getElementById('item'+text).style.display = 'none';
}
}
//open current
if (document.getElementById('item'+id))
document.getElementById('item'+id).style.display = 'block';
}
text = id;
}
else
{
//close text
if (document.getElementById('item'+text))
document.getElementById('item'+text).style.display = 'none';
}
text = 0;
}
}
и ссылки: <a onclick="_click(1); return false;" href="#">1</a> <a onclick="_click(2); return false;" href="#">2</a> <a onclick="_click(3); return false;" href="#">3</a> и дивы: <div style=" display:none" id="item1"> <div style=" display:none" id="item2"> <div style=" display:none" id="item3"> Это все работает(при клике по ссылке пив открывается,нажимаем на 2ю ссылку,первый див скрывается а 2й открывается) Но не получается сделать так чтоб 1й див сразу был открыт,и при нажатии 1й закрывается а 2й открывается,щас если сделать сразу первый див блоком то тогда по 2й и 3й сылке не открываются дивы пока 2а раза не кликнеш по 1й ссылке чтоб 1й див закрылся(( Никак не могу понять как это сделать(( ПС: поиском не нашол похожей проблеммы |
открыть закрыть открывашка на js
OLDBOY,
Вариант ...
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var _click = function () {
var b = 1;
return function (c) {
var a = document.getElementById("item" + b);
c == b && (a.style.display = "none" == a.style.display ? "" : "none");
c != b && (a.style.display = "none", a = document.getElementById("item" + c), a.style.display = "", b = c)
}
}();
window.onload = function() {
_click(1)
}
</script>
</head>
<body>
<a onclick="_click(1); return false;" href="#">1</a>
<a onclick="_click(2); return false;" href="#">2</a>
<a onclick="_click(3); return false;" href="#">3</a>
<div style=" display:none" id="item1">div1</div>
<div style=" display:none" id="item2">div2</div>
<div style=" display:none" id="item3">div3</div>
</body>
</html>
|
рони, подскажи как впилить анимацию при открытии?
|
yatony,
воспользоваться поиском по форуму и найти 100500 открывашек с анимацей |
Открывашка на js + css3
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div{
position: absolute;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
width: 200px;
height: 100px;
}
div.max {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition-duration: 2s;
-moz-transition-duration: 2s;
-o-transition-duration: 2s;
transition-duration: 2s;
}
div:nth-of-type(1) {
background: #FF9933;
}
div:nth-of-type(2)
{
background: #6666FF;
}
div:nth-of-type(3)
{
background: #CC33CC;
}
</style>
<script type="text/javascript">
var _click = function () {
var b = 1;
return function (c) {
var a = document.getElementById("item" + b);
c == b && (a.className = "" == a.className ? "max" : "");
c != b && (a.className = "", a = document.getElementById("item" + c), a.className = "max", b = c)
}
}();
window.onload = function() {
_click(1)
}
</script>
</head>
<body>
<a onclick="_click(1); return false;" href="#">1</a>
<a onclick="_click(2); return false;" href="#">2</a>
<a onclick="_click(3); return false;" href="#">3</a>
<div id="item1">div1</div>
<div id="item2">div2</div>
<div id="item3">div3</div>
</body>
</html>
|
рони, не получается, такого понятия как открывашки на форуме нет. Мне бы простое открытие сверху вниз.
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div[id^="item"]{
-webkit-transition:height .6s;
-moz-transition:height .6s;
-o-transition:height .6s;
transition:height .6s;
width:200px;
height:0px;
overflow:hidden;
}
div.max{
height:100px;
-webkit-transition-delay:.6s;
-moz-transition-delay:.6s;
-o-transition-delay:.6s;
transition-delay:.6s;
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
-o-transition-duration:1s;
transition-duration:1s;
}
#item1{
background:#F93;
}
#item2{
background:#66F;
}
#item3{
background:#C3C;
}
</style>
<script type="text/javascript">
var _click = function () {
var b = 1;
return function (c) {
var a = document.getElementById("item" + b);
c == b && (a.className = "" == a.className ? "max" : "");
c != b && (a.className = "", a = document.getElementById("item" + c), a.className = "max", b = c)
}
}();
window.onload = function() {
_click(1)
}
</script>
</head>
<body>
<div>обычный див</div>
<a onclick="_click(1); return false;" href="#">1</a>
<a onclick="_click(2); return false;" href="#">2</a>
<a onclick="_click(3); return false;" href="#">3</a>
<div id="item1">div1</div>
<div id="item2">div2</div>
<div id="item3">div3</div>
<div>обычный див</div>
</body>
</html>
|
рони, спасибо, но есть ещё одна маленькая проблемка, так как для div установлен css, то все другие дивы, которые не относятся к спойлеру на странице исчезают.
|
yatony,
а придумать селектор :cray: смотрите 7 пост снова |
| Часовой пояс GMT +3, время: 06:42. |
|