使用jQuery 3.6.4与Bootstrap时标签页等功能失效问题求助

问题现象 #

• 标签页无法切换，模态窗口、按钮功能异常

• CSS样式未正常生效

• 压缩CSS/JS文件后，控制台出现两类错误：

  Uncaught SyntaxError: Unexpected token '<'
  at DOMEval (jquery-3.6.4.js:133:12)
  at Function.globalEval (jquery-3.6.4.js:376:3)
  at text script (jquery-3.6.4.js:10231:11)
  at ajaxConvert (jquery-3.6.4.js:9350:19)
  at done (jquery-3.6.4.js:9828:15)
  at XMLHttpRequest. (jquery-3.6.4.js:10139:9)

  Uncaught TypeError: $(...).mask is not a function
  at HTMLDocument. (script.min.js:1:1422)
  at mightThrow (jquery-3.6.4.js:3802:29)
  at process (jquery-3.6.4.js:3870:12)

相关代码片段 #

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/blocks/style.css.map" type="text/css">
    <meta http-equiv="Cache-Control" content="no-cache">
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css">
    <link href="/css/blocks/style.css" rel="stylesheet" type="text/css">
    <link href="css/fonts/stylesheet.css" rel="stylesheet">
    <link rel="stylesheet" href="css/blocks/style.min.css" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
    <title>Menu</title>
</head>
<body>
<section class="menu">
  <div class="container">
     <h2 class="menu__title">Menu</h2>
       <ul class="menu__tabs" id="tabs">
          <li data-bs-toggle="tab" role="tab" class="menu__tab menu__tab_active"><div>Tab1</div></li>
          <li data-bs-toggle="tab" role="tab" class="menu__tab"><div>Tab2</div></li>
          <li data-bs-toggle="tab" role="tab" class="menu__tab"><div>Tab3</div></li>
       </ul>
  </div>
</section>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>    
<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry&callback=initMap"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js"></script>
<script type="text/javascript"  src="js/script.min.js"></script>
<script type="text/javascript" async src="js/script.js"></script>
</body>
</html>

SCSS（注：原代码为SCSS语法，未编译为标准CSS）

.menu {
    display: block;
    padding-bottom: 100px;
    background: #fff;

    &__title {
        text-align: center;
        font-weight: 400;
        font-size: 30px;
        line-height: 45px;
        align-items: flex-end;
        text-transform: uppercase;
        color: #0D0D0D;
    }


    &__tabs {
        display: flex;
        flex-wrap: wrap;
        list-style-type: none;
        justify-content: center;
        align-items: center;
        padding-left: 0;
        margin-bottom: 0;
        margin-top: 70px;
    }

    &__tab {
        box-sizing: border-box;
        width: 220px;
        height: 50px;
        background: rgba(0, 0, 0, 0.0001);
        border: 2px solid #D0D0D0;
        text-align: center;
        line-height: 48px;
        font-size: 18px;
        font-weight: 400;
        text-transform: uppercase;
        margin: 0 5px;
        transform: skewX(-25deg);
        cursor: pointer;
        transition: 0.5s all;

        &:hover {
            box-shadow: 3px 3px 20px $main-color;
            border: none;
        }

        div {
            text-transform: uppercase;
            transform: skewX(25deg);

        }

        &_active {
            color: #fff;
            background-color: $main-color;
            border: none;
        }
    }

    &__content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 100px 100px 20px 60px;


        &_active {
            display: flex;
        }
    }
}

标签切换JS代码

$('ul.menu__tabs').on('click', 'li:not(.menu__tab_active)', function() {
    $(this)
      .addClass('.menu__tab_active').siblings().removeClass('.menu__tab_active')
      .closest('div.container').find('div.menu__content').removeClass('.menu__content_active').eq($(this).index()).addClass('.menu__content_active');
});

解决方案 #

1. 修复JS类名错误

addClass/removeClass方法传入的类名不能带.，修正后代码：

$('ul.menu__tabs').on('click', 'li:not(.menu__tab_active)', function() {
  $(this)
    .addClass('menu__tab_active').siblings().removeClass('menu__tab_active')
    .closest('div.container').find('div.menu__content').removeClass('menu__content_active').eq($(this).index()).addClass('menu__content_active');
});

2. 解决jQuery版本冲突

移除低版本jQuery，保留高版本即可：

<!-- 删除以下两行 -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>

3. 修复CSS加载问题

• 移除Source Map文件的错误引入：<link rel="stylesheet" href="css/blocks/style.css.map" type="text/css">
• 将SCSS代码编译为标准CSS后再引入，浏览器无法直接识别嵌套语法
• 移除重复的样式文件：style.css和style.min.css二选一

4. 解决压缩后的错误

• 语法错误（Unexpected token '<'）：检查script.min.js路径是否正确，确保服务器返回的是JS文件而非HTML（如404页面）
• mask函数不存在：若使用了jQuery mask插件，需在jQuery之后引入对应的插件文件，压缩时要包含该插件代码

5. 其他优化

• 只加载一个JS文件：script.min.js和script.js二选一，优先加载压缩版
• 补全HTML闭合标签：确保section.menu和div.container标签完整闭合

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