Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Открытие див блоков ПОМОГИТЕ (https://javascript.ru/forum/misc/34348-otkrytie-div-blokov-pomogite.html)

elizaveta199309 30.12.2012 13:18

Открытие див блоков ПОМОГИТЕ
 
Друзья, братья, спасите!Имеется такой вот код
<script>
function openbox(id){
display = document.getElementById(id).style.display;

if(display=='none'){
document.getElementById(id).style.display='block';
}else{
document.getElementById(id).style.display='none';
}
}
</script>
<a href="#" onClick="openbox('one')">Ссылка</a>
<a href="#" onClick="openbox('two')">Ссылка 2</a>
таких ссылок у меня 4
все работает но проблема в том что нажимаешь на первую ссылку,вылазит блок с текстом, потом на вторую и блок на блок ложится, то есть получается каша. как сделать так чтобы при нажатии на вторую ссылку первый блок закрывался, а открытый был только второй?

ruslan_mart 30.12.2012 13:30

<input type="button" onclick="openbox(0)">
<input type="button" onclick="openbox(1)">
<input type="button" onclick="openbox(2)">

<div class="box">0</div>
<div class="box">1</div>
<div class="box">2</div>


function openbox(a)
{
   var b = document.getElementsByClassName('box');
   for(i=0;i<b.length;i++)
   {
      b[i].style.display = 'none';
   }
   b[a].style.display == 'none' ? a[a].style.display == 'block' : a[a].style.display == 'none' ;
}


В скобках указываем номер элемента.

lord2kim 30.12.2012 13:33

Ruslan_xDD,
b[a].style.display == 'none' ? b[a].style.display = 'block' : b[a].style.display = 'none';

хотя в данном случае достаточно
b[a].style.display = 'block';

и для IE нужна своя реализация метода getElementsByClassName()

Deff 30.12.2012 13:51

Цитата:

Сообщение от elizaveta199309
таких ссылок у меня 4

Такой вид для HTML подойдёт ?
<div id=wrap>
<!--открывающийся контент-->

  <div id="one1">1</div>
  <div id="two1">2</div>
  
  <div id="one2">1</div>
  <div id="two2">2</div>
  
  <div id="one3">1</div>
  <div id="two3">2</div>
  
  <div id="one4">1</div>
  <div id="two4">2</div>

</div>

<!--Клик ссылки-->
<a href="#" onClick="openbox('one1')">Ссылка</a>
 <a href="#" onClick="openbox('two1')">Ссылка 2</a>
 
 <a href="#" onClick="openbox('one2')">Ссылка</a>
 <a href="#" onClick="openbox('two2')">Ссылка 2</a>

 <a href="#" onClick="openbox('one3')">Ссылка</a>
 <a href="#" onClick="openbox('two3')">Ссылка 2</a>

 <a href="#" onClick="openbox('one4')">Ссылка</a>
 <a href="#" onClick="openbox('two4')">Ссылка 2</a>

ruslan_mart 30.12.2012 14:33

Цитата:

Сообщение от lord2kim
хотя в данном случае достаточно

Верно-верно, что-то я поторопился. :)


Часовой пояс GMT +3, время: 00:01.