如何获取网页按钮交互脚本？已复制HTML/CSS但按钮无响应

一、用Chrome开发者工具定位原站触发脚本 #

1. 打开目标页面后按F12启动开发者工具，切换到「Sources」标签页。
2. 展开左侧「Event Listener Breakpoints」→「Mouse」分类，勾选「click」选项。
3. 点击页面上的镜片切换按钮，工具会自动跳转到触发点击事件的脚本位置。
4. 查看右侧调用栈，找到负责添加/移除active类名的核心代码段；如果脚本是压缩混淆的，点击Sources标签里的「Pretty print」按钮（{}图标）格式化代码，再用Ctrl+F搜索active、classList.add这类关键词快速定位。

二、手动实现切换逻辑（找不到原脚本时的替代方案） #

如果定位原脚本困难，直接写一段基础逻辑就能实现功能，代码如下：

// 页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有切换按钮和对应镜片内容
  const lensBtns = document.querySelectorAll('.lens-option-button');
  const lensItems = document.querySelectorAll('.lens-detail-item');

  lensBtns.forEach((btn, idx) => {
    btn.addEventListener('click', function() {
      // 移除所有元素的active类
      lensBtns.forEach(b => b.classList.remove('active'));
      lensItems.forEach(i => i.classList.remove('active'));
      // 给当前点击的按钮和对应内容添加active类
      this.classList.add('active');
      lensItems[idx].classList.add('active');
    });
  });
});

将这段代码放在页面底部，或者引入到你的JS文件中，就能实现点击按钮切换镜片图片和描述的效果。

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