如何用HTML和JavaScript实现按用户选择切换按钮跳转URL

第一步：HTML结构 #

先写出套餐选择区域和按钮，给套餐选项加上可识别的类，方便JS操作：

<!-- 套餐选择 -->
<div class="package-selector">
  <span class="package-option active">Standard</span>
  <span class="package-option">Premium</span>
</div>

<!-- 预订按钮 -->
<button id="bookNowBtn">Book Now</button>

<!-- 可选：加个简单样式区分选中状态 -->
<style>
.package-option {
  padding: 8px 16px;
  border: 1px solid #ccc;
  cursor: pointer;
  margin-right: 8px;
}
.package-option.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}
</style>

第二步：JavaScript逻辑 #

实现两个核心功能：标记选中的套餐，点击按钮时根据选中项跳转对应URL：

// 获取套餐元素和按钮
const packageOptions = document.querySelectorAll('.package-option');
const bookBtn = document.getElementById('bookNowBtn');

// 给套餐选项添加点击事件，切换选中状态
packageOptions.forEach(option => {
  option.addEventListener('click', () => {
    // 先移除所有选项的选中状态
    packageOptions.forEach(opt => opt.classList.remove('active'));
    // 给当前点击的选项添加选中状态
    option.classList.add('active');
  });
});

// 按钮点击事件：判断选中套餐并跳转
bookBtn.addEventListener('click', () => {
  // 找到选中的套餐
  const selectedPackage = document.querySelector('.package-option.active');
  if (!selectedPackage) {
    alert('请先选择一个套餐');
    return;
  }
  // 获取套餐文本（转成小写方便判断）
  const packageType = selectedPackage.textContent.trim().toLowerCase();
  
  // 根据套餐类型跳转对应URL
  let targetUrl;
  if (packageType === 'standard') {
    targetUrl = 'html://blablabla.com/standard';
  } else if (packageType === 'premium') {
    targetUrl = 'html://blablabla.com/premium';
  }
  
  // 执行跳转
  window.location.href = targetUrl;
});

说明 #

• 点击Standard或Premium时，会给选中的选项加上蓝色背景的active样式，方便用户直观看到当前选择
• 点击按钮时，先检查是否有选中的套餐，没有就弹出提示；有则根据套餐文本判断跳转地址
• 代码里的URL是你提供的，直接用即可，如果后续要修改套餐文本或URL，调整对应判断逻辑就行

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