时间戳

首页 > 解决方案 > 如何一起勾勒标签和内容

php - 如何一起勾勒标签和内容

问题描述

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

$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

标签

标签： phpcsswordpresswoocommercetabs

解决方案

尝试将此添加到您的 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;
}

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

推荐阅读