求助：页面加载时crew-slider轮播图显示所有图片且文本重叠，点击按钮后正常

页面初始加载时，所有tab面板和图片元素都处于可见状态，未执行隐藏逻辑，只有点击控制按钮后才会触发隐藏操作，导致文本重叠、图片全部显示。以下是两种解决方案：

方案一：PHP输出时默认隐藏非初始内容 #

修改PHP代码，在输出第二个循环中的article和picture元素时，给非第一个条目添加hidden属性，页面加载时就只显示第一个crew的内容：

$args = array(
    'post_type' => 'crew-slider',
);
$crew_slider = new WP_Query( $args );
$x=0;
$i=1;
$a=1; 
echo '<div  class="dot-indicators flex" role="tablist" aria-label="crew member list">';
 while( $crew_slider->have_posts() ) : $crew_slider->the_post(); $x++;
echo'<button aria-selected="'. ($x-1 ? 'false' : 'true') .'" aria-controls="crewarticle-tab-'. $a++ .'" role="tab" data-image="crew-image-'. $i++ .'" tabindex="'. ($x == 1 ? '0' : '-1') .'"><span class="sr-only">The crew element</span></button>';
endwhile;
echo '</div>';
// 重置查询指针，确保第二个循环正常遍历
$crew_slider->rewind_posts();
while( $crew_slider->have_posts() ) : $crew_slider->the_post(); 
$a--;
$i--;
// 给非第一个tabpanel添加hidden属性
$hidden_panel = $crew_slider->current_post !== 0 ? ' hidden' : '';
echo '<article id="crewarticle-tab-'. $a .'" class="crew-details flow" role="tabpanel" tabindex="0"'. $hidden_panel .'>';
echo '<div class="flow flow-space--small">';
echo '<h2 class="fs-600 ff-serif uppercase">'. get_field('ruolo') .'</h2>';
echo '<p class="fs-700 uppercase ff-serif">'. get_field('nome') .'</p>';
echo '</div>';
echo '<p class="text-accent">'. get_field('testo_articolo') .'</p>';
echo '</article>';
[$url_crewslider] =wp_get_attachment_image_src(get_post_thumbnail_id(),'large');
// 给非第一个picture添加hidden属性
$hidden_pic = $crew_slider->current_post !== 0 ? ' hidden' : '';
echo '<picture id="crew-image-'. $i .'"'. $hidden_pic .'>';
echo '<img src="'. $url_crewslider .'" alt="image-crew">';
echo '</picture>';
endwhile;
// 恢复全局查询状态
wp_reset_postdata();

注意：添加$crew_slider->rewind_posts()确保第二个循环能正确遍历所有帖子，最后用wp_reset_postdata()恢复全局查询指针，避免影响后续代码。

方案二：JS初始化时执行隐藏逻辑 #

如果不想修改PHP代码，可在JS中添加页面加载完成事件，手动隐藏非初始内容：

const tabList = document.querySelector('[role="tablist"]');
const tabs = tabList.querySelectorAll('[role="tab"]');
tabList.addEventListener('keydown', changeTabFocus);
tabs.forEach((tab) => {
    tab.addEventListener('click', changeTabPanel);
});
let tabFocus = 0;

// 页面加载完成后执行初始化隐藏
document.addEventListener('DOMContentLoaded', function() {
  const mainContainer = tabList.parentNode;
  // 隐藏除第一个外的所有tabpanel
  const panels = mainContainer.querySelectorAll('[role="tabpanel"]');
  panels.forEach((panel, index) => {
    if (index !== 0) {
      panel.setAttribute('hidden', true);
    }
  });
  // 隐藏除第一个外的所有图片
  const pictures = mainContainer.querySelectorAll('picture');
  pictures.forEach((pic, index) => {
    if (index !== 0) {
      pic.setAttribute('hidden', true);
    }
  });
});

function changeTabFocus(e) {
    const keydownLeft = 37;
    const keydownRight = 39;
    if (e.keyCode === keydownLeft || e.keyCode === keydownRight) {
        tabs[tabFocus].setAttribute("tabindex", -1);
    }
    if (e.keyCode === keydownRight) {
        tabFocus++;
        if (tabFocus >= tabs.length) {
            tabFocus = 0;
        }
    }
    if (e.keyCode === keydownLeft) {
        tabFocus--;
        if (tabFocus < 0) {
            tabFocus = tabs.length - 1;
        }
    }
    tabs[tabFocus].setAttribute("tabindex", 0);
    tabs[tabFocus].focus();
}

function changeTabPanel(e) {
    const targetTab = e.target;
    const targetPanel = targetTab.getAttribute("aria-controls");
    const targetImage = targetTab.getAttribute("data-image");
    const tabContainer = targetTab.parentNode;
    const mainContainer = tabContainer.parentNode;
    tabContainer
        .querySelector('[aria-selected="true"]')
        .setAttribute("aria-selected", false);
              
    targetTab.setAttribute("aria-selected", true);
    mainContainer
        .querySelectorAll('[role="tabpanel"]')
        .forEach((panel) => panel.setAttribute("hidden", true));
    mainContainer.querySelector(`#${targetPanel}`).removeAttribute('hidden');
    mainContainer
        .querySelectorAll('picture')
        .forEach((picture) => picture.setAttribute("hidden", true));   
    mainContainer.querySelector(`#${targetImage}`).removeAttribute('hidden');
}

注意：修复了changeTabPanel函数末尾缺失的闭合大括号，确保代码正常执行。

内容的提问来源于stack exchange，提问作者Licia