меню для модальных окон

230

26 апреля 2017, 09:27

есть меню открытия окон

<div class="meny"> 
    <button  onClick="document.getElementById('hide1').style.display='none';document.getElementById('hide2').style.display='none';  
document.getElementById('hide3').style.display='none'; collapsElement('hide')">ОКНО1</button>  
 
<button  onClick="document.getElementById('hide').style.display='none';document.getElementById('hide2').style.display='none'; 
document.getElementById('hide3').style.display='none';collapsElement('hide1')">ОКНО2</button> 
 
<button onClick="document.getElementById('hide').style.display='none';document.getElementById('hide1').style.display='none'; 
document.getElementById('hide3').style.display='none';collapsElement('hide2')">ОКНО3</button> 
 
<button onClick="document.getElementById('hide').style.display='none';document.getElementById('hide1').style.display='none'; 
document.getElementById('hide2').style.display='none';collapsElement('hide3')">ОКНО4</button> 
 
и так далее 
  </div>

можно ли это как то сделать попроще

Answer 1

Можно так написать. А вообще "проще" - слова размытое.

    <script>
            var arr = ['hide', 'hide1', 'hide2', 'hide3']
        function collapsElementId(id){
            for(var i=0; i<arr.length; i++) {
                if (i!=id) document.getElementById(arr[i]).style.display='none';
            }
            collapsElement(arr[id]);
        }
    </script>
    <div class="meny">
        <button  onClick="collapsElementId(0);>ОКНО1</button> 
        <button  onClick="collapsElementId(1);>ОКНО2</button> 
        <button  onClick="collapsElementId(2);>ОКНО3</button> 
        <button  onClick="collapsElementId(3);>ОКНО4</button> 
и так далее
    </div>

Answer 2

$("button").click(function(){ 
  var bid = $(this).attr("id"); 
  $(".forhide").hide(); 
  var nid = bid.replace("btn", ""); 
  $("#wnd" + nid).show(); 
});

.forhide { 
  border: 1px solid black; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div> 
<button id="btn1">ОКНО1</button>  
<button id="btn2">ОКНО2</button> 
<button id="btn3">ОКНО3</button> 
<button id="btn4">ОКНО4</button> 
</div> 
<div id="wnd1" class="forhide">1</div> 
<div id="wnd2" class="forhide">2</div> 
<div id="wnd3" class="forhide">3</div> 
<div id="wnd4" class="forhide">4</div>

Answer 3

Ответ похож на ответ @DanIrkutskiy, но смысл в том, что в функцию передаем не индекс, а имя идентификатора. Добавим класс 'hide' к элементам, которые будем скрывать и отображать, это для удобства, чтобы получить все элементы через getElementsByClassName. Если исходить из ваших условий и немного дополнить их, то так:

function myFunc(id) { 
  hideElements = document.getElementsByClassName('hide'); 
 
  for (var index = 0; index < hideElements.length; index++) { 
    if (hideElements[index].id !== id) { 
      hideElements[index].style.display = 'none'; 
    } else { 
      collapsElement(id); 
    } 
  } 
} 
 
function collapsElement(id) { 
  document.getElementById(id).style.display = 'block'; // для наглядности 
}

.hide {}

<div class="meny"> 
  <div id="hide" class="hide">0</div> 
  <div id="hide1" class="hide">1</div> 
  <div id="hide2" class="hide">2</div> 
  <div id="hide3" class="hide">3</div> 
 
  <button onClick="myFunc('hide');">Window 0</button> 
  <button onClick="myFunc('hide1');">Window 1</button> 
  <button onClick="myFunc('hide2');">Window 2</button> 
  <button onClick="myFunc('hide3');">Window 3</button> 
</div>