通过 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 加载完成后再绑定事件。
? 完整可部署代码
<!-- 1. 引入 jQuery（推荐使用 CDN，Blogger 兼容性好） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 2. 按钮 HTML（可插入任意 Blogger 文章或小工具中） -->
<button type="button"
data-url="https://stackoverflow.com/"
data-url2="https://www.google.com/">
访问社区 →
</button>
<!-- 3. 核心逻辑 JS（建议放在 </body> 前或 Blogger 主题的 <head> 中） -->
<script>
jQuery(document).ready(function ($) {
let clicked = false; // 更语义化的变量名：clicked，替代 get_url
$('button[data-url][data-url2]').click(function (e) {
e.preventDefault();
const url1 = $(this).data('url');
const url2 = $(this).data('url2');
if (!clicked) {
window.open(url1, '_blank'); // 首次跳转，新标签页打开
clicked = true;
} else {
window.open(url2, '_blank'); // 再次点击跳转备用链接
}
});
});
</script>⚠️ 注意事项与优化建议
- 安全性：window.open() 在部分浏览器中可能被弹窗拦截，建议确保用户主动触发（如真实点击），避免自动调用；
- 多按钮支持：当前代码使用 $('button') 全局匹配，如页面含多个此类按钮，应添加唯一 class（如 <button class="toggle-link-btn">），并改写为 $('.toggle-link-btn')，避免状态混淆；
-
持久化需求？ 当前状态仅限单次会话（刷新即重置）。如需“永久切换”（例如记住用户已点过），需结合 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，对爬虫和屏幕阅读器不够友好。可在 <button> 外包裹 <a> 或添加 aria-label 提升可访问性，例如：
<button type="button" data-url="https://example.com/first" data-url2="https://example.com/second" aria-label="首次点击访问技术问答，再次点击搜索相关资料"> 点击探索 → </button>
该方案简洁、低侵入、无需后端参与，完美适配 Blogger 的静态模板环境，是实现“点击切换跳转链接”需求的专业级前端实践。
