单击一个超链接以更改多个不同div的css样式。
提问于 2014-01-31 05:52:57
我的网站上有不同的div，我想做以下工作
- 当我单击一个链接时，这将触发css代码中超过一个div的更改。例如，如果我单击客户端，我希望使用class=“r幻灯片”来生成ul元素，以获得heigh="0px“的属性，而不是在这个属性下展开。
但是我有两个问题：
- 首先，我使用了一个响应滑块，为了使它的height="0px“，我必须更改类属性。
- 另一个问题是如何使第二个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>滑块的两个tirgers的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调用"menu“(菜单)到顶部进行滑动转换，另一个div名为"second_slider”(在底部扩展)，而滑块(滑块)被称为“disapear”。
回答 1
Stack Overflow用户
发布于 2014-01-31 06:06:52
根据您的标记，您应该能够针对多个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 */
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21481761
复制相关文章
腾讯云开发者
