通过 javascript（配合 jquery）监听按钮点击事件，利用数据属性存储两个目标 url，并借助布尔状态变量控制首次与后续点击分别跳转不同链接，从而实现 blogger 按钮“一次一换链”的交互效果。
在 Blogger 博客中，若需实现「按钮首次点击跳转 A 链接，第二次点击跳转 B 链接」的动态行为，原生 HTML 无法直接完成，必须借助前端脚本逻辑控制。以下是经过验证、轻量且兼容 Blogger 环境的完整解决方案：
✅ 实现原理
- 使用 data-url 和 data-url2 自定义属性分别存储两个目标链接；
- 借助闭包内变量 get_url（初始为 false）记录点击状态；
- 首次点击时打开 data-url 并将状态设为 true；后续点击则打开 data-url2；
- 使用 e.preventDefault() 阻止默认行为，确保跳转完全由脚本控制；
- 所有操作在 jQuery(document).ready() 中执行，保障 DOM 加载完成后再绑定事件。
? 完整可部署代码
⚠️ 注意事项与优化建议
- 安全性：window.open() 在部分浏览器中可能被弹窗拦截，建议确保用户主动触发（如真实点击），避免自动调用；
- 多按钮支持：当前代码使用 $('button') 全局匹配，如页面含多个此类按钮，应添加唯一 class（如
-
持久化需求？ 当前状态仅限单次会话（刷新即重置）。如需“永久切换”（例如记住用户已点过），需结合 localStorage：
const key = 'btn_clicked_' + $(this).attr('id'); // 建议为按钮添加 id if (!localStorage.getItem(key)) { window.open(url1, '_blank'); localStorage.setItem(key, 'true'); } else { window.open(url2, '_blank'); } - 无障碍与 SEO：按钮本身不包含 href，对爬虫和屏幕阅读器不够友好。可在
该方案简洁、低侵入、无需后端参与，完美适配 Blogger 的静态模板环境，是实现“点击切换跳转链接”需求的专业级前端实践。
