Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.02.2012, 01:36
Новичок на форуме
Отправить личное сообщение для OLDBOY Посмотреть профиль Найти все сообщения от OLDBOY
 
Регистрация: 31.03.2011
Сообщений: 5

Закрытие и открытие дива по клику
Добрый вечер! Есть скрипт:
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й див закрылся((

Никак не могу понять как это сделать((

ПС: поиском не нашол похожей проблеммы
Ответить с цитированием
  #2 (permalink)  
Старый 22.02.2012, 07:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,809

открыть закрыть открывашка на 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>

Последний раз редактировалось рони, 21.07.2015 в 23:33.
Ответить с цитированием
  #3 (permalink)  
Старый 15.01.2015, 22:58
Интересующийся
Отправить личное сообщение для yatony Посмотреть профиль Найти все сообщения от yatony
 
Регистрация: 15.01.2015
Сообщений: 10

рони, подскажи как впилить анимацию при открытии?
Ответить с цитированием
  #4 (permalink)  
Старый 15.01.2015, 23:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,809

yatony,
воспользоваться поиском по форуму и найти 100500 открывашек с анимацей
Ответить с цитированием
  #5 (permalink)  
Старый 15.01.2015, 23:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,809

Открывашка на 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>
Ответить с цитированием
  #6 (permalink)  
Старый 16.01.2015, 01:59
Интересующийся
Отправить личное сообщение для yatony Посмотреть профиль Найти все сообщения от yatony
 
Регистрация: 15.01.2015
Сообщений: 10

рони, не получается, такого понятия как открывашки на форуме нет. Мне бы простое открытие сверху вниз.
Ответить с цитированием
  #7 (permalink)  
Старый 16.01.2015, 10:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,809

Сообщение от yatony
Мне бы простое открытие сверху вниз.
<!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>

Последний раз редактировалось рони, 16.01.2015 в 12:13.
Ответить с цитированием
  #9 (permalink)  
Старый 16.01.2015, 11:49
Интересующийся
Отправить личное сообщение для yatony Посмотреть профиль Найти все сообщения от yatony
 
Регистрация: 15.01.2015
Сообщений: 10

рони, спасибо, но есть ещё одна маленькая проблемка, так как для div установлен css, то все другие дивы, которые не относятся к спойлеру на странице исчезают.

Последний раз редактировалось yatony, 16.01.2015 в 11:51.
Ответить с цитированием
  #10 (permalink)  
Старый 16.01.2015, 12:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,809

yatony,
а придумать селектор смотрите 7 пост снова
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отследить открытие ссылки само по себе, без onclick lancer Events/DOM/Window 28 19.11.2011 18:40
padding-left увеличивает ширину дива cmygeHm (X)HTML/CSS 4 26.05.2011 00:45
перемещение дива с флеш плеером uppod anurkoja Internet Explorer 4 26.04.2011 11:45
Открытие, смена, закрытие вкладки(страницы) MayBe Events/DOM/Window 24 18.03.2011 20:54
popup окна. Открытие и закрытие их. FullHouse Элементы интерфейса 2 30.09.2010 10:01