详情 评论 问答 子比主题美化 – 文章详情页带Tab切换美化小柚子12月1日更新关注私信0495 一共两个代码,一个是PHP代码,一个是CSS代码,PHP代码里面我已经引入了CSS文件,你可以引入文件也可以放到:子比主题–>>自定义CSS样式即可! 定位:/wp-content/themes/zibll/inc/functions/zib-single.php文件,找到下面的函数,如下图 直接替换代码即可 PHP代码: ffunction zib_single() { zib_single_header(); do_action('zib_single_before'); wp_enqueue_style('tengfei-single-top-style', '/wp-content/themes/ZibTF/css/tengfei/single_top.css', array(), '1.0.0'); 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样式即可! .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);} 文章很赞,支持一下吧~ 还没有人为TA充电 为TA充电 还没有人为TA充电 © 版权声明 版权声明 1 本站名称: 七九网单 2 本站网址:www.fengxue.cc 3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。 4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。 5 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。 6 本站附件资源、教程等内容如因时效原因失效或不可用,请评论区留言或联系站长及时更新。 THE END子比美化 喜欢就支持一下吧点赞5打赏 分享QQ空间微博QQ好友复制链接收藏如何下载资源?您可以通过搜索或浏览分类列表来找到您期望下载的资源。随后点击资源介绍页右侧的下载链接按钮,依据提示信息进行操作即可。是否需要充值才能下载?大部分资源可积分免费下载,为了维持网站的运行小部分资源须付费才能下载。下载的资源是否有版权?本站提供的下载资源均为网络搜集,仅供个人学习和交流使用。对于版权问题,请用户自行判断并承担相应责任。 上一篇 子比主题美化 – 仿B2底部页脚样式美化 下一篇 子比主题美化-文章页内容上方广告代码 评论 抢沙发 请登录后发表评论 登录 注册 暂无评论内容