PHP Laravel实现按钮点击变色及文本同步至p标签功能

你现有代码存在必须修正的硬伤：所有按钮的闭合标签都将button拼写为buttom，会导致浏览器DOM解析结构混乱，首先要把这个拼写错误修正。
你不需要专门系统学习前端知识，直接照搬下面的代码嵌入Blade模板即可满足需求。

调整后的模板代码 #

保留原有Laravel多语言输出逻辑，仅添加基础类名、id用于元素定位：

<!-- 按钮组，统一添加tab-btn类用于批量绑定事件 -->
<button class="tab-btn">{{ trans('navbar.Students') }}</button>
<button class="tab-btn">{{ trans('navbar.Schools') }}</button>
<button class="tab-btn">{{ trans('navbar.teachers') }}</button>
<button class="tab-btn">{{ trans('navbar.teachers') }}</button>

<!-- 文本展示区域，添加id用于JS快速定位 -->
<p id="text-show-area"></p>

配套样式与交互逻辑 #

直接放在模板末尾即可，不需要引入任何第三方前端依赖：

<style>
/* 按钮被点击后的激活样式，按需求设置为蓝色 */
.tab-btn.is-active {
  color: #165DFF;
  /* 如需蓝底白字效果，将上面的color规则替换为 background: #165DFF; color: #fff; 即可 */
}
</style>

<script>
// 批量获取所有目标元素
const btnList = document.querySelectorAll('.tab-btn');
const textTarget = document.querySelector('#text-show-area');

// 为每个按钮绑定点击事件
btnList.forEach(btn => {
  btn.addEventListener('click', () => {
    // 清除所有按钮的激活状态，避免多按钮同时高亮
    btnList.forEach(item => item.classList.remove('is-active'));
    // 为当前点击的按钮添加激活样式
    btn.classList.add('is-active');
    // 将按钮的实际渲染文本同步到p标签中
    textTarget.innerText = btn.innerText.trim();
  })
})
</script>

实现效果 #

• 任意按钮被点击后，仅当前选中的按钮会变为蓝色，其余按钮恢复默认样式，不会出现多按钮同时高亮的问题
• p标签的内容会实时更新为被点击按钮的文本值，无需单独处理Laravel多语言的渲染结果
• 方案无学习门槛，复制粘贴后仅需根据UI要求调整颜色值即可直接使用

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