单击一个超链接可以更改多个不同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 */
}