Question

我的完整代码发布在Apply Range for Class and ID in CSS

我现有的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;
}

HTML：

<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等。

Answer 1

使用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);
            }       
            })

CSS上的正则表达式

HTML：

1 个答案: