單擊一個超鏈接可以更改多個不同div的CSS樣式

Question

我的網站上有不同的div，我想進行以下操作

• 當我單擊一個鏈接時，這將觸發CSS代碼中多個div的更改。 例如，如果我單擊客戶端，我想使用class =“ rslides”來創建ul元素，以獲取heigh =“ 0px”的屬性，然后再在其下擴展另一個div層。

但是我有兩個問題：

1. 首先是我正在使用一個響應式滑塊，為此我要使其高度= 0px，我必須更改class屬性。
2. 另一個問題是如何使一個鏈接觸發第二個div的2個操作。 我嘗試使用觸發器，但每個“ id”僅限於一個元素

DOM結構：

    <div id="slider">
       <div id="index_slider">
         <ul class="rslides" >
             <li><img src="img/index_design_02.jpg"></li>
                 <li><img src="img/index_design_03.jpg"></li>                 
         </ul>
        </div>
    </div>

JS代碼：

<script src="js/responsiveslides.min.js"></script>
<script>
  $(function() {
    $(".rslides").responsiveSlides({
    speed: 1000,
    maxwidth: 1200
      });
  });
</script>



<div id="menu"><a href="#rslides">clients</a></div>
<div id="second_slider"></div>

滑塊的兩個觸發器的CSS代碼：

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;  
  -webkit-transition:all 1s ease-in-out;

}

.rslides:target {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0; 
  height:0px;


}

這是JSfiddle的鏈接

我的目標是在鏈接上單擊一次，即稱為“ menu”的div在頂部進行滑動過渡，而另一個名為“ second_slider”的div在底部擴展，而滑塊則消失。

Answer 1

根據您的標記，您應該可以定位多個div。 唯一的限制是每個目標必須是您的鏈接目標的子級。

<div class="rslides">
  <div id="target-a">
    <div class="sub-target-one"></div>
    <div class="sub-target-two"></div>
  </div>
</div>

您的處理方式如下所示：

.rslides:target > .sub-target-one,
.rsiides:target > .sub-target-two {
  /* rules go here */
}