Reveal.js：如何从单张幻灯片移除全局设置的页脚

先修正你当前代码里的一个小问题：页脚部分有重复的id="footer"，HTML里ID必须唯一，这会导致后续JS选择器出现异常，先把结构改对。

步骤1：修正页脚HTML结构 #

把原来的隐藏页脚模板里的重复ID换成class：

<!-- 修正后的隐藏页脚模板 -->
<div id="hidden" style="display:none;">
  <div class="footer-template">
    <div class="footer-content">Copyright 2022</div>
  </div>
</div>

步骤2：标记需要隐藏页脚的幻灯片 #

给目标幻灯片添加自定义类no-footer，比如要隐藏第一张封面幻灯片的页脚：

<section class="no-footer">
  <a href="https://example.com/">
    <img
      src="images/example.png"
      alt="Example logo"
      style="
        height: 360px;
        margin: 0 auto 4rem auto;
        background: transparent;
      "
      class="logo"
    />
  </a>
  <h4>Title of my presentation</h4>
  <p style="font-size: 30px">
    Subtitle
  </p>
</section>

步骤3：用JS动态控制页脚显示/隐藏 #

替换原来的页脚插入脚本，改成监听Reveal.js的幻灯片切换事件，根据当前幻灯片的类来控制页脚：

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
  // 复制页脚模板并添加到reveal容器，给它一个唯一ID方便控制
  var footerTemplate = $('#hidden .footer-template').clone();
  footerTemplate.attr('id', 'global-footer').appendTo('div.reveal');

  // 幻灯片切换时检查并更新页脚状态
  Reveal.on('slidechanged', function(event) {
    var hideFooter = event.currentSlide.classList.contains('no-footer');
    $('#global-footer').css('display', hideFooter ? 'none' : 'block');
  });

  // 初始化时检查第一张幻灯片的状态
  Reveal.on('ready', function() {
    var initialSlide = Reveal.getCurrentSlide();
    var hideFooter = initialSlide.classList.contains('no-footer');
    $('#global-footer').css('display', hideFooter ? 'none' : 'block');
  });
</script>

补充说明 #

• 这样设置后，只要幻灯片带有no-footer类，切换到该幻灯片时页脚就会自动隐藏，切换到其他幻灯片时自动显示。
• 如果需要给页脚加样式，可以通过#global-footer这个ID写CSS，比如固定在页面底部：

#global-footer {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  color: #fff;
  font-size: 14px;
}

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