Можно ли на кнопку Bootstrap 4 повесить два события?

204

20 апреля 2018, 12:54

Есть два дива в навигационном меню. Надо сделать так чтобы чтобы при нажатии на одну и ту же кнопку один див скрывался а второй появлялся. И в обратку. Это возможно?

Answer 1

Посмотрите в этот код я думаю суть будет понятён.

Если ищете легких решений как алтернатива можете использовать toggle метод jQuery вот ссылка Jsfiddle

var divs = ["Div1", "Div2", "Div3", "Div4"]; 
var visibleDivId = null; 
function divVisibility(divId) { 
  if(visibleDivId === divId) { 
    visibleDivId = null; 
  } else { 
    visibleDivId = divId; 
  } 
  hideNonVisibleDivs(); 
} 
function hideNonVisibleDivs() { 
  var i, divId, div; 
  for(i = 0; i < divs.length; i++) { 
    divId = divs[i]; 
    div = document.getElementById(divId); 
    if(visibleDivId === divId) { 
      div.style.display = "block"; 
    } else { 
      div.style.display = "none"; 
    } 
  } 
}

.buttons a { 
  font-size: 16px; 
} 
.buttons a:hover { 
  cursor:pointer;  
  font-size: 16px; 
}

<div class="main_div"> 
 <div class="buttons"> 
  <a href="#" onclick="divVisibility('Div1');">Div1</a>  
  <a href="#" onclick="divVisibility('Div2');">Div2</a> 
  <a href="#" onclick="divVisibility('Div3');">Div3</a>  
  <a href="#" onclick="divVisibility('Div4');">Div4</a> 
  </div> 
  <div class="inner_div"> 
  <div id="Div1">Я первый DİV</div> 
  <div id="Div2" style="display: none;">Я второй DİV</div> 
  <div id="Div3" style="display: none;">Я третий DİV</div> 
  <div id="Div4" style="display: none;">Я четвертый DİV</div> 
  </div> 
</div>