PHP动态年份按钮生成与当前年份高亮显示教程

<?php
// 获取当前系统年份，例如 '2023'
$current_year = date('Y');

// 定义按钮链接的基础URL
// 实际应用中，请根据您的路由规则进行调整
$base_url = '/archive/year';

// 设定年份循环的起始年份，可以根据您的数据最早年份进行设置
$start_year = 2020;
?>

<?php
// ... (接上文代码)

echo '<div class="year-selector">'; // 可以将按钮包裹在一个容器中，便于CSS布局
echo '<h3>选择年份:</h3>';

// 循环从起始年份到当前年份
for ($year_iterator = $start_year; $year_iterator <= $current_year; $year_iterator++) {
    // 关键：在每次循环中判断当前迭代的年份 $year_iterator 是否等于实际的当前年份 $current_year
    // 如果是，则设置 $active_class 为 'active'，否则为空字符串
    $active_class = ($current_year == $year_iterator) ? 'active' : '';

    // 构建HTML链接按钮
    // 按钮会带上 'btn btn-default' 基础样式和条件性的 'active' 样式
    echo '<a href="' . $base_url . '/' . $year_iterator . '" ';
    echo 'class="btn btn-default ' . $active_class . '">';
    echo $year_iterator;
    echo '</a>';
}
echo '</div>';
?>

<?php
/**
 * PHP动态生成年份按钮并高亮当前年份
 *
 * 本示例演示如何使用PHP循环创建一系列年份链接按钮，
 * 并根据当前系统年份自动为对应按钮添加'active'类。
 */

// 获取当前系统年份，例如 '2023'
$current_year = date('Y');

// 定义按钮链接的基础URL
// 实际应用中，请根据您的路由规则进行调整
$base_url = '/archive/year';

// 设定年份循环的起始年份，例如从2020年开始
$start_year = 2020;

echo '<div class="year-selector">';
echo '<h3>选择年份:</h3>';

// 循环从起始年份到当前年份
for ($year_iterator = $start_year; $year_iterator <= $current_year; $year_iterator++) {
    // 判断当前迭代的年份是否为当前系统年份
    // 如果是，则设置 $active_class 为 'active'，否则为空字符串
    $active_class = ($current_year == $year_iterator) ? 'active' : '';

    // 输出HTML链接按钮
    // 按钮会带上 'btn btn-default' 基础样式和条件性的 'active' 样式
    echo '<a href="' . $base_url . '/' . $year_iterator . '" ';
    echo 'class="btn btn-default ' . $active_class . '">';
    echo $year_iterator;
    echo '</a>';
}
echo '</div>';

/**
 * 为了使 'active' 类生效，您需要在CSS中定义相应的样式。
 * 以下是一个简单的CSS示例，您可以将其添加到您的样式表中：
 *
 * <style>
 *     .year-selector {
 *         margin: 20px 0;
 *         font-family: Arial, sans-serif;
 *     }
 *     .year-selector h3 {
 *         margin-bottom: 10px;
 *         color: #333;
 *     }
 *     .btn {
 *         display: inline-block;
 *         padding: 8px 12px;
 *         margin: 5px;
 *         border: 1px solid #ccc;
 *         border-radius: 4px;
 *         text-decoration: none;
 *         color: #333;
 *         background-color: #f8f8f8;
 *         transition: all 0.2s ease-in-out;
 *     }
 *     .btn:hover {
 *         background-color: #e9e9e9;
 *         border-color: #bbb;
 *     }
 *     .btn.active {
 *         background-color: #007bff; /* 蓝色背景 */
 *         color: white; /* 白色文字 */
 *         border-color: #007bff;
 *         font-weight: bold;
 *         box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3);
 *     }
 * </style>
 */
?>