如何通过另一页面的按钮控制演示页面的Div内容切换？

你的这个双页PPT式演示方案完全能实现，用你已经掌握的HTML、JS、CSS就搞定，不用额外学新语言。核心思路是用浏览器的本地存储同步两个页面的状态，下面是具体实现：

关键逻辑 #

• 用localStorage共享当前幻灯片索引，同源页面能直接读取/修改这个数据
• 控制页点击按钮时更新索引，演示页监听存储变化自动切换幻灯片
• 做边界判断，避免索引超出幻灯片数量范围

代码示例 #

控制页（control.html）

<!DOCTYPE html>
<html>
<head>
    <title>控制页</title>
    <style>
        button { padding: 10px 20px; font-size: 18px; margin: 0 10px; }
    </style>
</head>
<body>
    <button id="prevBtn">上一页</button>
    <button id="nextBtn">下一页</button>

    <script>
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        let currentIndex = parseInt(localStorage.getItem('slideIndex')) || 0;
        // 这里改成你实际的幻灯片总数
        const totalSlides = 5;

        prevBtn.addEventListener('click', () => {
            if (currentIndex > 0) {
                currentIndex--;
                localStorage.setItem('slideIndex', currentIndex);
            }
        });

        nextBtn.addEventListener('click', () => {
            if (currentIndex < totalSlides - 1) {
                currentIndex++;
                localStorage.setItem('slideIndex', currentIndex);
            }
        });

        // 同步演示页可能修改的索引（比如演示页手动操作）
        window.addEventListener('storage', (e) => {
            if (e.key === 'slideIndex') {
                currentIndex = parseInt(e.newValue);
            }
        });
    </script>
</body>
</html>

演示页（presentation.html）

<!DOCTYPE html>
<html>
<head>
    <title>演示页</title>
    <style>
        .slide { 
            display: none; 
            width: 100vw; 
            height: 100vh; 
            font-size: 36px; 
            text-align: center; 
            line-height: 100vh;
            margin: 0;
        }
        .slide.active { display: block; }
    </style>
</head>
<body>
    <div class="slide active">幻灯片1</div>
    <div class="slide">幻灯片2</div>
    <div class="slide">幻灯片3</div>
    <div class="slide">幻灯片4</div>
    <div class="slide">幻灯片5</div>

    <script>
        const slides = document.querySelectorAll('.slide');
        const totalSlides = slides.length;

        // 更新显示对应索引的幻灯片
        function updateSlide(index) {
            slides.forEach((slide, idx) => {
                slide.classList.toggle('active', idx === index);
            });
        }

        // 初始加载时定位到对应幻灯片
        let currentIndex = parseInt(localStorage.getItem('slideIndex')) || 0;
        updateSlide(currentIndex);

        // 监听控制页的索引变化
        window.addEventListener('storage', (e) => {
            if (e.key === 'slideIndex') {
                currentIndex = parseInt(e.newValue);
                updateSlide(currentIndex);
            }
        });
    </script>
</body>
</html>

注意事项 #

• 两个页面必须在同一个域名/协议下（比如本地用浏览器打开两个文件，或者部署到同一服务器），否则localStorage无法共享
• 如果需要跨设备控制（比如用手机控制电脑演示），可以用PHP+WebSocket实现，但本地演示用上面的方案完全足够
• 可以自由修改幻灯片的样式、数量，控制页也能加当前页码显示等功能

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