0

我的网站上有不同的 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的链接

我的目标是单击链接，称为“菜单”的 div 以滑动过渡进入顶部，另一个名为“second_slider”的 div 在底部展开，滑块消失。

4

1 回答 1

0

根据您的标记，您应该能够定位多个 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 */
}
于 2014-01-31T14:06:52.937 回答