保留.post__menu容器时，如何让首个.post__slide默认可见？

问题回顾 #

当移除包裹nav的.post__menu容器时，首个.post__slide会正常显示；但保留该容器时，首个.post__slide无法显示。移除HTML中的.post__menu容器即可看到预期效果。请问如何调整JS代码，在保留.post__menu容器的前提下让首个.post__slide默认可见？现有JS代码片段：$(function() { $('.post nav a').on('click', function() { showSlide($(...

解决方案 #

嘿，这问题本质就是缺少初始化逻辑——你的JS只处理了点击导航后的slide切换，但没在页面加载时主动把第一个slide设为可见状态。移除.post__menu时可能刚好触发了某种默认样式或者隐式的显示规则，但保留容器后就没这个“巧合”了，咱们手动加个初始化步骤就行。

修改你的JS代码，在点击事件绑定前，添加一行初始化代码：

$(function() {
  // 页面加载完成后，默认显示第一个.post__slide
  $('.post__slide').first().show(); 

  // 原有点击事件逻辑
  $('.post nav a').on('click', function() {
    showSlide($(this).attr('href')); // 这里根据你实际的showSlide参数调整
    // 剩下的原有代码...
  });
});

额外说明 #

如果你的showSlide函数是通过添加/移除CSS类（比如active）来控制显示的（而不是直接用show()），那初始化代码要改成对应逻辑：

// 假设你的可见状态是通过.active类实现的
$('.post__slide').first().addClass('active');

同时要确保你的CSS里定义了.active对应的可见样式，比如：

.post__slide {
  display: none;
}
.post__slide.active {
  display: block;
}

这样不管.post__menu容器是否存在，页面加载后第一个slide都会默认显示啦～

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