单击一个超链接以更改多个不同 div 的 css 样式

Question

我的网站上有不同的 div，我想关注

• 当我单击一个链接时，将触发多个 div 的 css 代码内部的更改。例如，如果我单击客户端，我想使用 class="rslides" 制作 ul 元素以获取 heigh="0px" 的属性，然后将另一个 div 层扩展到该层下方。

但我有两个问题：

1. 首先是我使用了一个响应式滑块，我要为其设置 height="0px" ，我必须更改类属性。
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 */
}