子比美化 – 文章详情页带Tab切换美化

演示效果：

代码部署：

本文隐藏内容

一共两个代码，一个是PHP代码，一个是CSS代码，PHP代码里面我已经引入了CSS文件，你可以引入文件也可以放到：子比主题–>>自定义CSS样式即可！

定位：/wp-content/themes/zibll/inc/functions/zib-single.php文件，我们找到下面的函数，如下图！

然后我们将一整块替换我下面的代码，直接替换我修改过的代码！

function zib_single() {
    zib_single_header();
    do_action('zib_single_before');
    echo '<article class="article main-bg theme-box box-body radius8 main-shadow">';
    echo '
    <div class="tabs">
        <div class="tab active" data-target="#postsposcontent"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-view"></use></svg> 详情</div>
        <div class="tab" data-target="#commentscontent"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-comment"></use></svg> 评论</div>
        <div class="tab" data-target="#accordionhelpcontent"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-like"></use></svg> 问答</div>
    </div>';
    echo '<div id="postsposcontent" style="display: block;">';
    zib_single_box_header();
    zib_single_box_content();
    echo '</div>';
    echo '<div id="commentscontent" style="display: none;">';
    if (_pz('post_authordesc_s') && !is_single()) {
        $args = array(
            'user_id'     => get_the_author_meta('ID'),
            'show_button' => false,
            'show_img_bg' => false,
            'class'       => 'author',
        );
        zib_get_user_card_box($args, true);
    }
    echo '</div>';
    echo '
    <div id="accordionhelpcontent" class="tab2_content" style="display: none;">
        <div class="wp-block-zibllblock-collapse">';
    
    $faq_list = [
        '如何下载资源？' => '您可以通过搜索或浏览分类列表来寻觅您期望下载的资源。随后，点击资源介绍页右侧的下载链接按钮，依据提示信息进行操作即可。',
        '是否需要充值才能下载？' => '大部分资源可积分免费下载，部分资源须付费才能下载。',
        '下载的资源是否有版权？' => '本网站提供的下载资源均为网络搜集，仅供个人学习和交流使用。对于版权问题，请用户自行判断并承担相应责任。',
    ];
    $i = 1;
    foreach ($faq_list as $title => $content) {
        echo '<div class="panel" data-theme="panel" data-isshow="true">
                <div class="panel-heading collapsed" href="#collapse_'.$i.'" data-toggle="collapse" aria-expanded="false">
                    <i class="fa fa-plus"></i>
                    <strong class="biaoti">'.$title.'</strong>
                </div>
                <div class="collapse" id="collapse_'.$i.'">
                    <div class="panel-body">
                        <p>'.$content.'</p>
                    </div>
                </div>
              </div>';
        $i++;
    }
    echo '</div></div>';
    echo '
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            document.querySelectorAll(".tab").forEach(tab => {
                tab.addEventListener("click", function () {
                    document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
                    document.querySelectorAll("#postsposcontent, #commentscontent, #accordionhelpcontent").forEach(c => c.style.display = "none");
                    this.classList.add("active");
                    document.querySelector(this.dataset.target).style.display = "block";
                });
            });
            document.querySelectorAll(".panel-heading").forEach(panel => {
                panel.addEventListener("click", function () {
                    let targetId = panel.getAttribute("href");
                    let target = document.querySelector(targetId);
                    if (!target) return;
                    let icon = panel.querySelector(".fa"); 
                    let isCollapsed = target.classList.contains("in");
                    document.querySelectorAll(".collapse").forEach(c => {
                        c.classList.remove("in");
                        c.previousElementSibling.classList.add("collapsed");
                        c.previousElementSibling.querySelector(".fa").style.transform = "rotate(-45deg)"; 
                    });
                    if (!isCollapsed) {
                        target.classList.add("in");
                        panel.classList.remove("collapsed");
                        icon.style.transform = "rotate(0deg)"; 
                    }
                });
            });
        });
    </script>';
    echo '</article>';
    do_action('zib_single_after');
}

以下为CSS样式，直接丢到子比主题–>>自定义CSS样式即可！

/*压缩后的CSS代码 下面提代一份格式化后的css代码 供大家学习*/
.panel-heading .fa{transition:transform 0.3s ease;transform:rotate(-45deg);padding:5px;color:#556af1;}.panel-heading:not(.collapsed) .fa{transform:rotate(0deg);}.question-container{border-radius:6px;border:solid 1px var(--main-border-color);overflow:hidden;border-bottom:solid 0px rgba(50,50,50,0);}.question{cursor:pointer;position:relative;margin-bottom:10px;padding:2.5rem 4rem;margin-bottom:0;border-bottom:solid 1px var(--main-border-color);}.question i{position:absolute;right:0;top:50%;transform:translateY(-50%);}.question.active i.fa.fa-plus{display:none;}.question.active i.fa.fa-minus{display:inline-block;}.answer.active{display:unset;background-color:var(--focus-color);flex:1 1 auto;min-height:1px;color:#fff !important;padding:2.5rem 4.5rem;display:block;}@keyframes bounce{0%{transform:scaleY(0.3);background-color:green;}50%{transform:scaleY(1);background-color:orange;}100%{transform:scaleY(0.3);background-color:green;};}.tab2_content.active{display:block;}.tab2_content.active{display:block;}#accordionhelp-content{margin-bottom:20px;}.tab-container{width:80%;margin:auto;}.tabs{display:flex;cursor:pointer;padding:20px 0;}.tab{padding:10px 15px;transition:background-color 0.3s;border-radius:10px;background:var(--muted-bg-color);margin:0px 5px;font-size:14px;}.tab.active{color:#fff;background-color:#556af1;transform:scale(1.05);box-shadow:0 6px 12px rgba(0,0,0,0.3);transition:all 0.3s ease;}.tab-content{position:relative;overflow:hidden;}.tab2_content{display:none;}.button{display:inline-block;padding:10px 20px;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;cursor:pointer;border:none;border-radius:5px;background-color:#556af1;color:#fff;box-shadow:0 4px 8px rgba(0,0,0,0.2);transition:all 0.3s ease;}.button:hover{background-color:#3e53c4;box-shadow:0 6px 12px rgba(0,0,0,0.3);}

/*压缩后的CSS代码 下面提代一份格式化后的css代码 供大家学习*/
.panel-heading .fa{
  transition:transform 0.3s ease;
  transform:rotate(-45deg);
  padding:5px;
  color:#556af1;
}

.panel-heading:not(.collapsed) .fa{
  transform:rotate(0deg);
}

.question-container{
  border-radius:6px;
  border:solid 1px var(--main-border-color);
  overflow:hidden;
  border-bottom:solid 0px rgba(50,50,50,0);
}


.question{
  cursor:pointer;
  position:relative;
  margin-bottom:10px;
  padding:2.5rem 4rem;
  margin-bottom:0;
  border-bottom:solid 1px var(--main-border-color);
}

.question i{
  position:absolute;
  right:0;top:50%;
  transform:translateY(-50%);
}

.question.active i.fa.fa-plus{
  display:none;
}

.question.active i.fa.fa-minus{
  display:inline-block;

}

.answer.active{
  display:unset;
  background-color:var(--focus-color);
  flex:1 1 auto;
  min-height:1px;
  color:#fff !important;
  padding:2.5rem 4.5rem;
  display:block;
}

@keyframes bounce{
  0%{transform:scaleY(0.3);
    background-color:green;
    }
  50%{
    transform:scaleY(1);
    background-color:orange;
    }
  100%{
    transform:scaleY(0.3);
    background-color:green;
    };
  }
  
  .tab2_content.active{
    display:block;
  }
  
  .tab2_content.active{
    display:block;
  
}

#accordionhelp-content{
  margin-bottom:20px;
}

.tab-container{
  width:80%;
  margin:auto;
}

.tabs{
  display:flex;
  cursor:pointer;
  padding:20px 0;
}

.tab{
  padding:10px 15px;
  transition:background-color 0.3s;
  border-radius:10px;
  background:var(--muted-bg-color);
  margin:0px 5px;
  font-size:14px;
}

.tab.active{
  color:#fff;
  background-color:#556af1;
  transform:scale(1.05);
  box-shadow:0 6px 12px rgba(0,0,0,0.3);
  transition:all 0.3s ease;
}

.tab-content{
  position:relative;
  overflow:hidden;
}

.tab2_content{
  display:none;
}

.button{
  display:inline-block;
  padding:10px 20px;
  font-size:16px;
  font-weight:bold;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  border:none;
  border-radius:5px;
  background-color:#556af1;
  color:#fff;
  box-shadow:0 4px 8px rgba(0,0,0,0.2);
  transition:all 0.3s ease;
}

.button:hover{
  background-color:#3e53c4;
  box-shadow:0 6px 12px rgba(0,0,0,0.3);
}