如何在按钮

时间:2016-03-31 11:06:40

标签: javascript css wordpress wordpress-plugin woocommerce

我在类别页面上显示了产品标签,外观漂亮。感觉但我遇到了一个问题,就像列表方式中逐个显示的所有标签内容一样。因此,我希望仅在点击该特定链接时显示该选项卡内容,否则将显示活动链接内容。

我尝试过以下钩子&用于在类别页面上显示产品标签的CSS。

CSS:

.woocommerce-tabs ul.tabs{
list-style:none;
overflow:hidden;
position:relative;
margin:0 ;/*0 1.618em*/
padding:0;
}

 .woocommerce-tabs ul.tabs li {
background: #EFEFEF;
display:inline-block;
position:relative;
z-index:0;
margin:0;
}

 .woocommerce-tabs ul.tabs li.active{
    border-color:#78c8ce;
}
.woocommerce-tabs ul.tabs li a {
display:inline-block;
font-weight:600;
color:#606060;
text-decoration:none;
font-size:12px;
padding:10px 20px;
text-transform: uppercase;
}

.woocommerce-tabs ul.tabs li a:hover{
text-decoration:none;
color:#7a7a7a;
}
.noreviews a{color:#78c8ce;}
 .woocommerce-tabs ul.tabs li.active {
background-color:#78c8ce;
z-index:2;color:#FFF;
border-bottom-color:#78c8ce;
border-top-left-radius: 2px;
border-top-right-radius: 2px;

}

.woocommerce-tabs ul.tabs li.active a{
color:inherit;
text-shadow:inherit;
}

#rating_chzn{display: none;}
 .woocommerce-tabs ul.tabs:before{
position:absolute;
content:" ";
width:100%;
bottom:0;
left:0;
border-bottom:1px solid #EFEFEF;
z-index:1;
}

 .woocommerce-tabs .panel {
margin:0 0 2em;
padding:15px 0;
}

 .woocommerce-tabs .accordion-group.panel{
    padding:0;
    margin:0;
    display: block !important;
}

PHP

add_action('woocommerce_after_shop_loop_item', 'woocommerce_output_product_data_tabs', 20);

请为此问题建议任何解决方案。

0 个答案:

没有答案