Javascript 如何在单击按钮时显示产品选项卡内容

我在分类页面上显示了产品标签，外观和感觉都很好，但我遇到了一个问题，就像所有标签内容都以列表方式逐个显示一样。所以我想只在点击那个特定链接时显示选项卡内容，否则活动链接内容将显示

我尝试过使用以下钩子和css在分类页面上显示产品标签

CSS:

PHP

---

请提出解决这个问题的办法

请更新代码段。它没有正确显示输出。您不能将

php

放入代码段…@dingo\d我已经使用了钩子来获取分类页面上的产品选项卡，因此不需要添加phpsnippets@AbhayNaik形象或code@user5803787代码。

.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;
}

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