激活时如何更改 class 的显示

Question

When I click a button< it adds a class of active to slide2, I want to change the style of div named slide1 when slide2 is active but why doesn't it work?

EDIT: codepen: https://codepen.io/jerico001/pen/poeNKBr

here is my javascript

<script>
      var next = document.querySelector(".next");
      var previous = document.querySelector(".previous");
      var slide2 = document.querySelector(".slide2");

      next.addEventListener("click", function () {
        slide2.classList.add("active");
      });

      previous.addEventListener("click", function () {
        slide2.classList.remove("active");
      });
    </script>

.slide2.active {
  display: block;
}

.slide2.active .slide1 {
  display: none;
}

Answer 1

You can use JavaScript, by creating a condition as:

var specific2=document.getElementsByClassName("slide2");
var specific1=document.getElementsByClassName("slide1");

if(specific2[0].classList.contains("active")){
    specific1[0].style.display="none";
}

/*since getElementsByClassName creates an array with all elements with that classname, you can catch the first element by using [0] if it is your first element with that classname*/

Answer 2

I would use the hidden attribute , along with classList , which exposes two handy methods: toggle() and contains()

 const btn = document.querySelector('#toggle'); const slide1 = document.querySelector('.slide1'); const slide2 = document.querySelector('.slide2'); btn.addEventListener('click', () => { slide2.classList.toggle('active'); slide1.hidden = slide2.classList.contains('active'); });

 .slides { width: 300px; position: absolute; display: block; }.slide1, .slide2 { width: 100px; height: 100px; float: left; border: 3px dotted black; border-radius: 10px; background-color: #def; margin: 10px; }.active { background-color: #fed; }

 <button id="toggle">toggle</button> <div class="slides"> <div class="slide1">slide one</div> <div class="slide2">slide two</div> </div>