如何实现单选高亮a标签后点击按钮跳转对应href链接

首先修正原有逻辑的两个问题：一是原选择器范围太大，会误修改提交按钮的样式；二是时间a标签默认点击会直接跳转，无法实现选完再提交的交互，最后补充提交跳转逻辑即可。

1. 修改Blade模板中时间标签的点击事件 #

给clicktime传入事件对象，方便后续阻止默认跳转，修改后循环部分的a标签代码如下：

@foreach($doctor->tuesday as $tuesday)
<a class="timing" id="{{$tuesday->id}}" onclick="clicktime({{$tuesday->id}}, event)" href="{{url('/')}}/fixschedule/{{$tuesday->id}}">
<span>{{date("g:i a",strtotime($tuesday->starttime))}}</span>
</a>
@endforeach

2. 替换原有JS逻辑 #

<script>
// 时间选中切换逻辑
function clicktime(id, e)
{
  e.preventDefault(); // 阻止a标签默认跳转
  // 仅清空时间选项的选中状态，不影响页面其他按钮
  $(".timing").removeClass("selected");
  // 给当前选中项加高亮样式
  $("#"+id).addClass("selected");
}

// 提交跳转逻辑
function submit()
{
  const selected = $(".timing.selected");
  // 未选时间时给出提示
  if(selected.length === 0){
    alert("请先选择预约时间段");
    return false;
  }
  // 跳转到选中时间对应的预约链接
  window.location.href = selected.attr("href");
}
</script>

逻辑说明 #

• 样式切换只针对带timing类的时间选项，不会误改提交按钮的原有样式
• 选中状态同一时间只会保留一个，符合单选要求
• 未选时间直接点提交会弹出提示，不会出现空跳转
• 选中后提交直接读取对应a标签的原生href属性，不用额外拼接地址，和后端渲染的链接完全一致，不会出现路由错误

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