跨页面跳转Bootstrap Carousel指定幻灯片：JS代码失效问题

我尝试实现从其他页面跳转至Bootstrap Carousel的指定幻灯片，但当URL包含#slide=参数时，JS代码未触发，功能无法实现。

Page2（目标页面）代码 #

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
    
    <!-- Core theme CSS (includes Bootstrap)-->
        <link href="css/styles.css?v20221223=1" rel="stylesheet" />
</head>

<body>

         
<!-- Carousel Wrapper-->

        
<div id="myCarousel" class="carousel carousel-dark slide" data-bs-interval="false" data-ride="carousel" data-pause="hover">
  
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="..." class="d-block img-fluid">
    </div>
    <div class="carousel-item">
      <img src="https://www.w3schools.com/bootstrap/la.jpg" alt="..." class="d-block img-fluid">
    </div>
    <div class="carousel-item">
      <img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="..." class="d-block img-fluid">
    </div>
   </div>
</div>
</div>
<!-- END Carousel Wrapper-->

<!-- Bootstrap core JS - version as of Dec 2022-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- JS for loading a particular slide from another page -->
        <script>
            
            function qs(key) {
                key = key.replace(/[*+?^$.\[\]{}()|\\\/]/g, "\\$&"); 
                var match = location.search.match(new RegExp("[?&]" + key + "=([^&]+)(&|$)"));
                var slide = match && decodeURIComponent(match[1].replace(/\+/g, " "));
                if (Math.floor(slide) == slide && $.isNumeric(slide))
                    return parseInt(slide);
                else
                    return 0; 
                }
            //why this isn't working???
            $('#myCarousel').carousel(qs('slide'));
        </script>
    
</body>
</html>

Page1（跳转页面）链接代码 #

<a href="page2.html#slide=2">slide 2</a>

问题根源 #

1. 参数位置不匹配：跳转链接用的是哈希锚点#slide=2，但JS里的qs函数从URL查询参数（?开头的location.search）取参数，导致取不到slide值。
2. 缺少jQuery依赖：代码中使用了$('#myCarousel')和$.isNumeric()，但页面未引入jQuery库，Bootstrap 5默认不再依赖jQuery，这些代码会直接报错。
3. API版本不兼容：旧教程针对Bootstrap 3/4，而你使用的是Bootstrap 5，Carousel的初始化和调用方式已变更。

修复方案 #

1. 修正参数获取逻辑（适配哈希锚点） #

修改参数获取逻辑，从location.hash中提取slide值：

function getSlideFromHash() {
    const hash = location.hash.slice(1); // 移除开头的#
    const params = new URLSearchParams(hash);
    const slide = params.get('slide');
    // 验证是否为有效索引（幻灯片从0开始，这里最多3张，索引0-2）
    if (slide && !isNaN(slide) && Number.isInteger(parseFloat(slide)) && parseInt(slide) >= 0 && parseInt(slide) <= 2) {
        return parseInt(slide);
    }
    return 0;
}

2. 改用Bootstrap 5原生Carousel API #

移除jQuery依赖，使用Bootstrap 5原生方式初始化并调用跳转：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    const carousel = new bootstrap.Carousel(document.getElementById('myCarousel'));
    carousel.to(getSlideFromHash());
});

3. 完整修复后的Page2 JS代码 #

替换原有的JS部分为：

<script>
    function getSlideFromHash() {
        const hash = location.hash.slice(1);
        const params = new URLSearchParams(hash);
        const slide = params.get('slide');
        if (slide && !isNaN(slide) && Number.isInteger(parseFloat(slide)) && parseInt(slide) >= 0 && parseInt(slide) <= 2) {
            return parseInt(slide);
        }
        return 0;
    }

    document.addEventListener('DOMContentLoaded', function() {
        const carousel = new bootstrap.Carousel(document.getElementById('myCarousel'));
        carousel.to(getSlideFromHash());
    });
</script>

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