Блог

У меня этот код работает так, как я хочу, за исключением того, что я не хочу, чтобы кто-то мог открывать более одной «вкладки» одновременно. Я не уверен, как заставить Javascript удалить класс «transform-active» из div, который в настоящее время имеет его, если он добавлен в другой div путем нажатия его кнопки.

 function Slidein(num) {
   var element = document.getElementById(num);
   element.classList.toggle("transform-active");
} 

 .tabcontent {
  background-color: #218D9B;
 overflow: hidden;
  height: 0px;
  width: 600px;
}

.transform{
  -webkit-transition: .7s;  
  -moz-transition: .7s;  
  -o-transition: .7s;  
  -ms-transition: .7s;  
  transition: .7s;
}

.transform-active {
  background-color: #45CEE0;
  height: 200px;
  width: 600px;
  visibility: visible;
}
   

 <button id="button1" onclick="Slidein('div1')">Button 1</button>
<button id="button2" onclick="Slidein('div2')">Button 2</button>
<button id="button3" onclick="Slidein('div3')">Button 3</button>

<div id="div1" class="tabcontent transform">
  Here's some text in my FIRST div
</div>

<div id="div2" class="tabcontent transform">
  This would be the SECOND div text
</div>

<div id="div3" class="tabcontent transform">
  And now we have a THIRD div with its text
</div> 

Возможно, измените Slidein на что-то вроде этого:

 function Slidein(num) {    
      var elementWithTransformActiveClass = document.querySelector('.transform-active');
      var element = document.getElementById(num);
      if (!!elementWithTransformActiveClass) elementWithTransformActiveClass.classList.remove("transform-active");
      if (element !== elementWithTransformActiveClass) element.classList.add("transform-active");
}
 

Редактировать:

Вы можете получить доступ к активной кнопке:

 var buttonId = num.replace('div', 'button'); 
var button = document.getElementById(buttonId); 

// and now you can add a new class to the button 

button.classList.add('new-class');


function Slidein(num) {    
      var elementWithTransformActiveClass = document.querySelector('.transform-active');
      var element = document.getElementById(num);
      if (!!elementWithTransformActiveClass) elementWithTransformActiveClass.classList.remove("transform-active");
      if (element !== elementWithTransformActiveClass) {
           element.classList.add("transform-active");

           var buttonId = num.replace('div', 'button'); 
           var button = document.getElementById(buttonId); 

           // and now you can add a new class to the button 

           button.classList.add('new-class');
      }
}
 

Чтобы увидеть все свойства и методы, которые можно использовать для всех элементов HTML, посетите: w3schools.com/jsref/dom_obj_all.asp