如何根据菜单按钮点击动态切换按钮的跳转链接？

点击菜单按钮后，无法切换「View Page」按钮的跳转链接：

• 点击菜单按钮1后，「View Page」可打开webpage1.html
• 点击菜单按钮2后，「View Page」仍打开webpage1.html，无法切换到webpage2.html

现有代码 #

HTML代码 #

<nav class= "menu">
  <li id="button1" onclick="button1()"> Page 1</li>
  <li id="button2" onclick="button2()">Page 2</li>
</nav>

<div>
  <li id="Link" href="#">View Page</li>
</div>

JavaScript代码 #

const bttn = document.getElementById("Link");

function button1(){
  bttn.addEventListener('click', function bttn3() {
  var url = "webpage1.html";
  window.open(url);
}

function button2(){
  bttn.addEventListener('click', function bttn3() {
  var url = "webpage2.html";
  window.open(url);
}

问题根源 #

你当前的代码每次点击菜单按钮时，都会给「View Page」元素新增一个点击事件监听器，不会覆盖之前绑定的。比如先点按钮1，绑定了打开webpage1.html的事件；再点按钮2，又绑定了打开webpage2.html的事件。此时点击「View Page」会触发所有绑定的事件，浏览器按绑定顺序执行，所以先执行打开webpage1.html的事件，导致看起来没切换。

解决方案 #

方法1：移除旧事件再绑定新事件 #

利用命名函数，先移除之前的事件监听器，再添加新的：

const bttn = document.getElementById("Link");
let currentHandler = null;

function button1(){
  if(currentHandler){
    bttn.removeEventListener('click', currentHandler);
  }
  currentHandler = function bttn3() {
    window.open("webpage1.html");
  }
  bttn.addEventListener('click', currentHandler);
}

function button2(){
  if(currentHandler){
    bttn.removeEventListener('click', currentHandler);
  }
  currentHandler = function bttn3() {
    window.open("webpage2.html");
  }
  bttn.addEventListener('click', currentHandler);
}

方法2：用全局变量存目标URL，只绑定一次事件 #

这种方式更简洁，不需要反复操作事件监听器：

const bttn = document.getElementById("Link");
let targetUrl = "";

// 只绑定一次点击事件
bttn.addEventListener('click', function() {
  if(targetUrl){
    window.open(targetUrl);
  }
});

function button1(){
  targetUrl = "webpage1.html";
}

function button2(){
  targetUrl = "webpage2.html";
}

方法3：改用a标签直接修改href（推荐） #

li标签不是链接元素，用a标签更符合HTML语义，还能直接修改href属性实现跳转：

修改后的HTML

<nav class= "menu">
  <li id="button1" onclick="button1()"> Page 1</li>
  <li id="button2" onclick="button2()">Page 2</li>
</nav>

<div>
  <a id="Link" href="#" target="_blank">View Page</a>
</div>

对应JavaScript

const linkBtn = document.getElementById("Link");

function button1(){
  linkBtn.href = "webpage1.html";
}

function button2(){
  linkBtn.href = "webpage2.html";
}

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