如何让JavaScript点击后的按钮保持激活状态（点击页面其他区域不失效）

需求是点击按钮后为其添加active类以改变颜色，该状态需保持至点击另一个按钮；但目前点击按钮后再点击页面其他区域，按钮会恢复原有颜色。尝试过jQuery方案但报错$ is not a function，现有代码如下：

当前使用的JS代码 #

const myFunction_date_night = () => {
    document.getElementById("outings-list_image_date-night").style.display ='block';
    document.getElementById("outings-list_image_day-out-with-kids").style.display ='none'
    document.getElementById("outings-list_image_saturday-mornings").style.display ='none'
    document.getElementById("outings-list_image_workday-downtown").style.display ='none'
    document.getElementById("outings-list_image_night-out").style.display ='none'
    document.getElementById("outings-list_title_date-night").style.display ='block';
    document.getElementById("outings-list_title_day-out-with-kids").style.display ='none'
    document.getElementById("outings-list_title_saturday-mornings").style.display ='none'
    document.getElementById("outings-list_title_workday-downtown").style.display ='none'
    document.getElementById("outings-list_title_night-out").style.display ='none'
    document.getElementById("timeline-date-night").style.display ='block';
    document.getElementById("timeline-day-out-with-kids").style.display ='none'
    document.getElementById("timeline-saturday-mornings").style.display ='none'
    document.getElementById("timeline-workday-downtown").style.display ='none'
    document.getElementById("timeline-night-out").style.display ='none'
}

const myFunction_day_out_with_kids = () => {
    document.getElementById("outings-list_image_date-night").style.display ='none';
    document.getElementById("outings-list_image_day-out-with-kids").style.display ='block'
    document.getElementById("outings-list_image_saturday-mornings").style.display ='none'
    document.getElementById("outings-list_image_workday-downtown").style.display ='none'
    document.getElementById("outings-list_image_night-out").style.display ='none'
    document.getElementById("outings-list_title_date-night").style.display ='none';
    document.getElementById("outings-list_title_day-out-with-kids").style.display ='block'
    document.getElementById("outings-list_title_saturday-mornings").style.display ='none'
    document.getElementById("outings-list_title_workday-downtown").style.display ='none'
    document.getElementById("outings-list_title_night-out").style.display ='none'
    document.getElementById("timeline-date-night").style.display ='none';
    document.getElementById("timeline-day-out-with-kids").style.display ='block'
    document.getElementById("timeline-saturday-mornings").style.display ='none'
    document.getElementById("timeline-workday-downtown").style.display ='none'
    document.getElementById("timeline-night-out").style.display ='none'
}

const myFunction_saturday_mornings = () => {
    document.getElementById("outings-list_image_date-night").style.display ='none';
    document.getElementById("outings-list_image_day-out-with-kids").style.display ='none'
    document.getElementById("outings-list_image_saturday-mornings").style.display ='block'
    document.getElementById("outings-list_image_workday-downtown").style.display ='none'
    document.getElementById("outings-list_image_night-out").style.display ='none'
    document.getElementById("outings-list_title_date-night").style.display ='none';
    document.getElementById("outings-list_title_day-out-with-kids").style.display ='none'
    document.getElementById("outings-list_title_saturday-mornings").style.display ='block'
    document.getElementById("outings-list_title_workday-downtown").style.display ='none'
    document.getElementById("outings-list_title_night-out").style.display ='none'
    document.getElementById("timeline-date-night").style.display ='none';
    document.getElementById("timeline-day-out-with-kids").style.display ='none'
    document.getElementById("timeline-saturday-mornings").style.display ='block'
    document.getElementById("timeline-workday-downtown").style.display ='none'
    document.getElementById("timeline-night-out").style.display ='none'
}

const myFunction_workday_downtown = () => { 
    document.getElementById("outings-list_image_date-night").style.display ='none';
    document.getElementById("outings-list_image_day-out-with-kids").style.display ='none'
    document.getElementById("outings-list_image_saturday-mornings").style.display ='none'
    document.getElementById("outings-list_image_workday-downtown").style.display ='block'
    document.getElementById("outings-list_image_night-out").style.display ='none'
    document.getElementById("outings-list_title_date-night").style.display ='none';
    document.getElementById("outings-list_title_day-out-with-kids").style.display ='none'
    document.getElementById("outings-list_title_saturday-mornings").style.display ='none'
    document.getElementById("outings-list_title_workday-downtown").style.display ='block'
    document.getElementById("outings-list_title_night-out").style.display ='none'
    document.getElementById("timeline-date-night").style.display ='none';
    document.getElementById("timeline-day-out-with-kids").style.display ='none'
    document.getElementById("timeline-saturday-mornings").style.display ='none'
    document.getElementById("timeline-workday-downtown").style.display ='block'
    document.getElementById("timeline-night-out").style.display ='none'
}


const myFunction_night_out = () => {
    document.getElementById("outings-list_image_date-night").style.display ='none';
    document.getElementById("outings-list_image_day-out-with-kids").style.display ='none'
    document.getElementById("outings-list_image_saturday-mornings").style.display ='none'
    document.getElementById("outings-list_image_workday-downtown").style.display ='none'
    document.getElementById("outings-list_image_night-out").style.display ='block'
    document.getElementById("outings-list_title_date-night").style.display ='none';
    document.getElementById("outings-list_title_day-out-with-kids").style.display ='none'
    document.getElementById("outings-list_title_saturday-mornings").style.display ='none'
    document.getElementById("outings-list_title_workday-downtown").style.display ='none'
    document.getElementById("outings-list_title_night-out").style.display ='block'
    document.getElementById("timeline-date-night").style.display ='none';
    document.getElementById("timeline-day-out-with-kids").style.display ='none'
    document.getElementById("timeline-saturday-mornings").style.display ='none'
    document.getElementById("timeline-workday-downtown").style.display ='none'
    document.getElementById("timeline-night-out").style.display ='block'
}

按钮CSS #

.outings-list.et_pb_bg_layout_light.et_pb_button:hover,
.outings-list.et_pb_bg_layout_light.et_pb_button:focus,
.outings-list.et_pb_bg_layout_light.et_pb_button.is-active,
.outings-list.et_pb_bg_layout_light.et_pb_button.active {
    background-color: #ffbe00 !important;
    border-color: #ffbe00 !important;
    color: #232323 !important;
}

尝试过的jQuery代码及错误 #

尝试添加以下脚本：

const myFunction_date_night = () => {
    $('.outings-list.et_pb_bg_layout_light.et_pb_button').removeClass('active-button');
    $(this).addClass('active-button');
}

对应新增CSS：

.active-button {
    background-color: #ffbe00 !important;
    border-color: #ffbe00 !important;
    color: #232323 !important;
}

报错信息：

uncaught TypeError: $ is not a function
at myFunction_date_night ((index):328:3)
at HTMLButtonElement.onclick 

解决方案 #

1. 错误原因分析 #

$ is not a function是因为页面未引入jQuery库，直接使用jQuery语法会报错。改用原生JavaScript实现，避免依赖外部库。

2. 重构代码实现需求 #

给所有按钮添加统一类名和自定义属性，大幅减少重复代码，同时实现状态保持：

步骤1：修改HTML按钮结构

给每个按钮添加统一类outing-tab和data-target属性（值对应内容标识）：

<button class="outings-list et_pb_bg_layout_light et_pb_button outing-tab" data-target="date-night" onclick="handleTabClick(this)">Date Night</button>
<button class="outings-list et_pb_bg_layout_light et_pb_button outing-tab" data-target="day-out-with-kids" onclick="handleTabClick(this)">Day Out With Kids</button>
<button class="outings-list et_pb_bg_layout_light et_pb_button outing-tab" data-target="saturday-mornings" onclick="handleTabClick(this)">Saturday Mornings</button>
<button class="outings-list et_pb_bg_layout_light et_pb_button outing-tab" data-target="workday-downtown" onclick="handleTabClick(this)">Workday Downtown</button>
<button class="outings-list et_pb_bg_layout_light et_pb_button outing-tab" data-target="night-out" onclick="handleTabClick(this)">Night Out</button>

步骤2：替换JS代码

function handleTabClick(clickedButton) {
    // 移除所有按钮的active类
    document.querySelectorAll('.outing-tab').forEach(btn => btn.classList.remove('active'));
    // 给当前点击的按钮添加active类
    clickedButton.classList.add('active');

    // 获取当前目标标识
    const target = clickedButton.getAttribute('data-target');

    // 隐藏所有内容元素
    document.querySelectorAll('[id^="outings-list_image_"], [id^="outings-list_title_"], [id^="timeline-"]').forEach(el => el.style.display = 'none');

    // 显示当前目标对应的内容
    document.getElementById(`outings-list_image_${target}`).style.display = 'block';
    document.getElementById(`outings-list_title_${target}`).style.display = 'block';
    document.getElementById(`timeline-${target}`).style.display = 'block';
}

步骤3：CSS无需额外修改

现有CSS已包含.active类的样式，直接生效即可，可删除之前新增的.active-button相关CSS。

3. 解决点击页面其他区域样式恢复的问题 #

之前的问题是按钮依赖:focus伪类，点击其他区域失去焦点后样式失效。现在使用active类控制样式，只有点击其他按钮时才会移除当前按钮的active类，状态会一直保持，符合需求。

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