CodeIgniter中跨页面锚点跳转至指定DIV显示数据的实现方法

问题需求 #

在CodeIgniter框架中，通过锚点标签实现从一个页面跳转至另一个页面，同时自动打开目标页面的指定DIV以展示对应数据。

当前代码示例 #

跳转发起页（第二页）代码： #

<div class="accordion__item">
    <a href="<?= base_url(); ?>client/progress?id#$habit->id; ?> ">
    <div class="accordion__header collapsed" data-toggle="collapse" data-target="#bordered_no-gutter_collapseThree">
        <span class="accordion__header--text">按习惯查看进度</span>
        <span class="accordion__header--indicator style_two"></span>
    </div>
    </a>
    <div id="bordered_no-gutter_collapseThree" class="collapse accordion__body" data-parent="#accordion-four">
    <?php
    if (!empty($all_habits)) {
        foreach ($all_habits as $habit) { ?>
            <div class="accordion__header accordion" id="prog_habit" value="<?= $habit->id; ?>">
                <span class="accordion__header--text"></span><?= $habit->title; ?></span>
            </div>
        <?php }
    } ?>
    </div>
</div>

跳转目标页（第一页）代码： #

<a href="<?= base_url() ?>client/progress?id=<?= $habit->id; ?> " class="btn btn-success shadow btn-xs sharp mr-1 mx-1"><i class="fa fa-eye"></i></a>

修正与实现方案 #

1. 修正锚点链接格式 #

确保链接正确传递参数并指定锚点：

• 发起页链接修正：

<a href="<?= base_url('client/progress') ?>?id=<?= $habit->id ?>#bordered_no-gutter_collapseThree">

将参数id与锚点#bordered_no-gutter_collapseThree分开，保证参数传递和锚点定位同时生效。

• 目标页链接修正：

<a href="<?= base_url('client/progress') ?>?id=<?= $habit->id ?>#bordered_no-gutter_collapseThree" class="btn btn-success shadow btn-xs sharp mr-1 mx-1"><i class="fa fa-eye"></i></a>

2. 目标页自动展开指定DIV #

在目标页底部添加JS代码，页面加载时检测URL锚点并自动展开对应面板：

$(document).ready(function() {
    var targetDiv = window.location.hash;
    if (targetDiv === '#bordered_no-gutter_collapseThree') {
        // 适配Bootstrap折叠组件的展开逻辑
        $(targetDiv).removeClass('collapse').addClass('show');
        $(targetDiv).prev('.accordion__header').removeClass('collapsed');
    }
});

3. 优化循环内元素ID唯一性 #

发起页循环中的习惯项ID需保证唯一，避免冲突：

<?php if (!empty($all_habits)) {
    foreach ($all_habits as $habit) { ?>
        <div class="accordion__header accordion" id="prog_habit_<?= $habit->id; ?>" data-habit-id="<?= $habit->id; ?>">
            <span class="accordion__header--text"><?= $habit->title; ?></span>
        </div>
<?php }
} ?>

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