我的完整代码发布在此处“在CSS中应用类别和ID的范围”
我的JSfiddle- http://jsfiddle.net/9Tpzp/
我现有的CSS代码如下所示
#tab1:target ~ .tabs .tab1 dd div {
height: 28px;
}
#tab2:target ~ .tabs .tab2 dd div {
height: 28px;
}
#tab3:target ~ .tabs .tab3 dd div {
height: 28px;
}
#tab4:target ~ .tabs .tab4 dd div {
height: 28px;
}
我改变如下
[id*='tab']:target ~ .tabs [class*='tab'] dd div {
height : 28px;
}
<body>
<div class="container">
<div class="accordion">
<span id="tab1"></span>
<span id="tab2"></span>
<div class="tabs">
<dl class="tab1">
<dd>
<a href="#tab1">Tab #1</a>
<div><p>Tab1</p></div>
</dd>
</dl>
<dl class="tab2">
<dd>
<a href="#tab2">Tab #2</a>
<div>
<p>
Tab2
</p>
</div>
</dd>
</dl>
</div>
</div>
</div>
</body>
现在如何在该正则表达式中指定1-4的数字范围。
如果在CSS中是不可能的，我们可以通过其他任何方式（例如jquery等）来实现。
通过使用jQuery解决了这个问题。下面是修复程序。
$(document).on('click','a[href^="#tab"]',function(){
$('a[href^="#tab"]').siblings('div').css('height',0);
if($(this).siblings('div').height() == 0){
$(this).siblings('div').css('height',28);
}
else {
$(this).siblings('div').css('height',0);
}
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句