VPF::простой show/hide javascript - Форум программистов

MCTarakan

Дата 12.8.2008, 16:09 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 6
Регистрация: 29.7.2008
Где: ireland

Репутация: нет
Всего: нет

скажу сразу, поиск смотрел, в нем только одна тема немного соответствует моему вопросу, но так как она датируется 2006 годом, решил создать новую...

Итак, есть:

Код


<a href="#" onclick="show (div1)">LINK1</a>
<div id=div1>
СОДЕРЖАНИЕ1
<div>
 
<a href="#" onclick="show (div2)">LINK2</a>
<div id=div2>
СОДЕРЖАНИЕ2
<div>
 
<a href="#" onclick="show (div3)">LINK3</a>
<div id=div3>
СОДЕРЖАНИЕ3
<div>

при этом, когда жму на LINK1 то открывается СОДЕРЖАНИЕ1, когда жму на LINK2 открывается СОДЕРЖАНИЕ2, а СОДЕРЖАНИЕ1 закрывается и т.д.

Вот тут у Гугла сделано так - есть ссылки и есть скрытый конетнт под ними, при нажатии на ссылку этот контент открывается, при нажатии на ссылку ниже верхний скрывается, а нижний открывается и так далее...

Вот код гугла

Код


function initTrainingVids() {
  var vidLinks = [];
  var allLinks = document.getElementsByTagName('a');
 
  for(var i = 0, tag; tag = allLinks[i]; i++) {
    if(tag.className == 'vid') {
      vidLinks[vidLinks.length] = tag;
    }
  }
 
  for(var i = 0, vid; vid = vidLinks[i]; i++) {
    // Get YouTube video ID
    var vidId = vid.href.slice(vid.href.indexOf('=')+1);
    // Find object to add video to
    var vidTarget = vid.parentNode.parentNode.getElementsByTagName('div');
    vidTarget = vidTarget[vidTarget.length - 1];
    /**
    while(vidTarget.nodeName.toLowerCase() != 'div' && vidTarget.className != 'vid') {
      vidTarget = vidTarget.nextSibling;
    }
      **/
    // Attach onclick event
    vid.onclick = function(target, src) {
                    return function() {
                      if(target.style.display != 'block') {
                        var vidTag = '<iframe src="http://www.youtube.com/v/'+src+'"></iframe>';
                        target.innerHTML = vidTag;
                        var allDivs = document.getElementsByTagName('div')
                        for(var i = 0, div; div = allDivs[i]; i++) {
                          if(div.className == 'vid' && div.style.display == 'block') {
                            div.style.display = 'none';
                          }
                        }
                        target.style.display = 'block';
                      } else {
                        target.innerHTML = '';
                        target.style.display = 'none';
                      }
                      return false;
                    };
                  }(vidTarget, vidId);
  }
 
}

я пытался самостоятельно изменить его, но так ничего и не получилось (с програмиированием у меня не очень хорошо)...

Нашел также скрипты, которые просто открывают/закрывают свой слой, но чтобы открывали свой, а закрывали чужие - не нашел....

Хотелось бы простое решение smile

заранее спасибо!

Это сообщение отредактировал(а) MCTarakan - 12.8.2008, 16:10

comtat

Дата 12.8.2008, 16:57 (ссылка)

(голосов:1)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 4
Всего: 71

Типа того ...

Код


<html>
<head></head>
<body>
<style>
.hidden { display:none;}
</style>
<script>
function show(divId) {
    elems = document.getElementsByTagName("div");
    r = /div(\d+)/i;
    for (i = 0; i < elems.length; i++) {
        arr = r.exec(elems[i].id);
        if (arr != null && arr.length > 1) {
            elems[i].className = 'hidden';
        }
    }
    document.getElementById(divId).className = "";
}
</script>
<a href="#" onclick="show('div1')">LINK1</a>
<div id=div1>
СОДЕРЖАНИЕ1
</div>
 
<a href="#" onclick="show('div2')">LINK2</a>
<div id=div2 class="hidden">
СОДЕРЖАНИЕ2
</div>
 
<a href="#" onclick="show('div3')">LINK3</a>
<div id=div3 class="hidden">
СОДЕРЖАНИЕ3
</div>
</body>
</html>

--------------------

Рожденный в СССР !!!
ExtJS - мой фреймворк

zibox86

Дата 12.8.2008, 17:48 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 164
Регистрация: 11.12.2007

Репутация: 1
Всего: 1

По чему бы вообще не сделать это через CSS!!!

MCTarakan

Дата 12.8.2008, 18:47 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 6
Регистрация: 29.7.2008
Где: ireland

Репутация: нет
Всего: нет

comtat, спасибо, сорри сразу не разобрался... а как бы еще сделать, если слой открыт, чтоб он закрывался через туже ссылку? Т.е. если слой DIV1 закрыт, то при нажатии на LINK1 он открывается, а при повторном нажатии закрывается (при сохранении условий первого поста естественно)... думаю понятно объяснил?

zibox86, хм... а как это можно сделать через CSS?

Это сообщение отредактировал(а) MCTarakan - 12.8.2008, 18:50

comtat

Дата 12.8.2008, 21:32 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1310
Регистрация: 2.5.2006
Где: Россия, Казань

Репутация: 4
Всего: 71

Пожалуйста

Код

<html>
<head></head>
<body>
<style>
.hidden { display:none;}
</style>
<script>
function show(divId) {
    div_status = 0; //0- hidden, 1- active

    if (document.getElementById(divId).className == "")
       div_status = 1;

    elems = document.getElementsByTagName("div");
    r = /div(\d+)/i;
    for (i = 0; i < elems.length; i++) {
        arr = r.exec(elems[i].id);
        if (arr != null && arr.length > 1) {
            elems[i].className = 'hidden';
        }
    }

    if (!div_status) document.getElementById(divId).className = "";
}
</script>
<a href="#" onclick="show('div1')">LINK1</a>
<div id=div1>
СОДЕРЖАНИЕ1
</div>
 
<a href="#" onclick="show('div2')">LINK2</a>
<div id=div2 class="hidden">
СОДЕРЖАНИЕ2
</div>
 
<a href="#" onclick="show('div3')">LINK3</a>
<div id=div3 class="hidden">
СОДЕРЖАНИЕ3
</div>
</body>
</html>

Цитата(zibox86 @ 12.8.2008, 17:48

)

По чему бы вообще не сделать это через CSS!!!

zibox86, поясните как это можно сделать ???

--------------------

Рожденный в СССР !!!
ExtJS - мой фреймворк

12345c

Дата 13.8.2008, 03:13 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Зачем множить переменные и классы?
Здесь http://js2.ru/files/js-man3.htm посмотрите эту функцию (она, правда, навороченная, зато многофункциональная):

Код


fShHid=function(t){al=arguments.length;
  for(var i=1;i<al;i++){
    c=arguments[i];cl=c.length;o=t;
    for(j=0;j<cl;j++){cj=c.charAt(j);
      if(cj=='-'){o=o.parentNode;continue;}
      if(/\d/.test(cj)){/*alert(o.tagName);*/o=o.childNodes[parseInt(cj)];continue;}
      if(cj=='b'){o=o.style./*visibility='visible'*/display='block';continue;}
      if(cj=='n'){o=o.style./*visibility='hidden'*/display='none';}
      if(cj=='i'){o=o.style.display='inline';}
      if(cj=='t'){o=o.style.display=d.all&&!self.opera?'block':'table-cell';}
    }
  }
}

Добавлено через 7 минут и 17 секунд
ну а для работы в режиме флип-флопа надо дописать ещё одну команду ('f') для блочных элементов, например, такую:

Код


if(cj=='f'){o=o.style.display=='none'?o.style.display='block':o.style.display='none';}

или ещё больше усилить её универсальность, распознавая тип тега, упразднив варианты "b-i-t".

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

MCTarakan

Дата 13.8.2008, 10:52 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 6
Регистрация: 29.7.2008
Где: ireland

Репутация: нет
Всего: нет

comtat, спасибо большое! smile

12345c, спасибо за ссылку, буду ковырять, но... у меня не очень хорошо с программированием, даже на яве :( smile

Добавлено через 3 минуты и 23 секунды
smile

вот для меня эта строка

Цитата

Специфицирует функцию, которая создаёт прототип объекта. Заметьте, что значением этого свойства является ссылка на саму функцию, а не строка, содержащая имя функции.

как буд-то на китайском написана

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »