Div颜色淡入淡出切换代码在Codepen可用，网页中失效如何解决？

嘿，这个问题我太熟了！你的代码在Codepen能正常运行，但导出到本地HTML就失效，核心原因是你用了jQuery，但本地文件里没引入这个库——Codepen默认会帮你加载一些常用的工具库（比如jQuery），可导出到本地时这些依赖不会自动带上，导致你的jQuery代码根本没法执行。

下面是具体的修复步骤和完整代码：

1. 先引入jQuery库 #

在你的HTML文件里，必须先加载jQuery才能使用它的语法。最简单的方式是用CDN链接，把这段代码放在<body>的末尾（或者<head>里）：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

2. 确保代码在DOM加载完成后执行 #

另外，为了避免页面元素还没加载好就执行JS代码（导致找不到.btn或.change元素），最好把你的jQuery代码包裹在$(document).ready()里，或者直接把脚本放在所有DOM元素的后面。

修复后的完整HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Toggle Demo</title>
    <style>
        .change {
            -webkit-transition: .6s ease;
            -moz-transition: .6s ease;
            -ms-transition: .6s ease;
            -o-transition: .6s ease;
            transition: .6s ease; /* 补充标准写法，兼容更多浏览器 */
            background-color: rgb(25, 65, 196);
            height: 15px;
            width: 15px;
            border-radius: 50%;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="change"></div>
    <br> <!-- 这里用<br>更规范，</br>是错误写法哦 -->
    <button value="rgb(31, 221, 97)" class="black btn">On</button>
    <button value="rgb(221, 56, 30)" class="red btn">Off</button>

    <!-- 先引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <!-- 再执行你的业务代码 -->
    <script>
        $(document).ready(function() {
            $('.btn').on('click', function() {
                const valColor = $(this).val();
                $('.change').css({ backgroundColor: valColor });
            });
        });
    </script>
</body>
</html>

额外小提示 #

• 我帮你修正了HTML里的</br>（正确写法是<br>），还在CSS里补充了标准的transition属性，去掉了重复的background-color声明；
• 如果你不想依赖jQuery，也可以用原生JavaScript实现，这样兼容性更好，还不用额外加载库：

document.addEventListener('DOMContentLoaded', function() {
    const buttons = document.querySelectorAll('.btn');
    const colorBox = document.querySelector('.change');

    buttons.forEach(btn => {
        btn.addEventListener('click', function() {
            colorBox.style.backgroundColor = this.value;
        });
    });
});

把这段代码替换掉原来的jQuery脚本就行，效果完全一样。

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