如何一起勾勒标签和内容答案

【问题标题】：how to outline tab and content together如何一起勾勒标签和内容
【发布时间】：2019-12-21 05:47:43
【问题描述】：

我正在尝试概述每个选项卡的内容，但我无法达到想要的结果。这是我的代码

$tabs = apply_filters( 'woocommerce_product_tabs', array() );

if ( ! empty( $tabs ) ) : ?>

    <div class="woocommerce-tabs wc-tabs-wrapper">
        <ul class="tabs wc-tabs" role="tablist">
            <?php foreach ( $tabs as $key => $tab ) : ?>
                <li class="<?php echo esc_attr( $key ); ?>_tab" id="tab-title-<?php echo esc_attr( $key ); ?>" role="tab" aria-controls="tab-<?php echo esc_attr( $key ); ?>">
                    <a href="#tab-<?php echo esc_attr( $key ); ?>"><?php echo apply_filters( 'woocommerce_product_' . $key . '_tab_title', esc_html( $tab['title'] ), $key ); ?></a>
                </li>
            <?php endforeach; ?>
        </ul>
        <?php foreach ( $tabs as $key => $tab ) : ?>
            <div class="woocommerce-Tabs-panel woocommerce-Tabs-panel--<?php echo esc_attr( $key ); ?> panel entry-content wc-tab" id="tab-<?php echo esc_attr( $key ); ?>" role="tabpanel" aria-labelledby="tab-title-<?php echo esc_attr( $key ); ?>">
                <?php if ( isset( $tab['callback'] ) ) { call_user_func( $tab['callback'], $key, $tab ); } ?>
            </div>
        <?php endforeach; ?>
    </div>

<?php endif; ?>

如何正确地设置它看起来像这样的样式？ https://ibb.co/zX8Qwzb

【问题讨论】：

标签： php css wordpress woocommerce tabs

【解决方案1】：

尝试将其添加到您的 CSS：

ul.tabs li.active {
    background: #fff;
    border-bottom-color: #fff;
}

.woocommerce-tabs ul.tabs li {
    border: 1px solid #e6e6e6;
    margin-left: -1px;
}
.woocommerce div.product .woocommerce-tabs .panel {
    border: 1px solid black;
}

但请记住，您提供的信息几乎不可能提供解决方案。

【讨论】：