如何基于PHP foreach为视频网站分类菜单的单个按钮添加active类

分两种场景处理：页面刷新跳转和无刷新AJAX加载，先搞定基础的页面加载时的active状态，再处理交互逻辑。

1. 服务器端设置页面加载时的Active类 #

首先拿到当前访问的分类ID，循环渲染分类菜单时，判断当前分类ID是否和访问的ID一致，一致就给a标签加上active类。

修改你的PHP代码：

<?php 
// 获取当前分类ID，根据URL参数获取，这里假设从GET参数id取值
$current_category_id = isset($_GET['id']) ? $_GET['id'] : '';
foreach($pt->categories as $key => $category) {
    // 判断当前分类是否为当前访问的分类
    $active_class = ($key == $current_category_id) ? 'active' : '';
?>
    <div class="swiper-slide">
    <a class="<?php echo $active_class; ?>" 
        href="{{LINK videos/category/<?php echo $key?>}}" 
        data-load="?link1=videos&page=category&id=<?php echo $key?>">
<?php echo $category?></a>
    </div>
<?php 
}
?>

这样用户打开某个分类页面时，对应的菜单按钮会自动带上active类，其他按钮无此样式。

2. 客户端处理无刷新点击切换（适配AJAX加载场景） #

你的a标签带有data-load属性，看起来是用无刷新方式加载内容，这时候需要用JavaScript处理点击事件，实时切换active类：

添加这段JS代码到页面底部：

// 给所有分类菜单的a标签绑定点击事件
document.querySelectorAll('.swiper-slide a').forEach(link => {
    link.addEventListener('click', function(e) {
        // 移除所有a标签的active类
        document.querySelectorAll('.swiper-slide a').forEach(item => {
            item.classList.remove('active');
        });
        // 给当前点击的a标签添加active类
        this.classList.add('active');
        // 保留你原有AJAX加载逻辑（如果有的话）
    });
});

如果是普通页面跳转场景，服务器端代码已经足够，无需这段JS；如果是无刷新加载内容，就需要加上这段来实时切换active状态。

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