如何用jQuery在同标签打开HTML页面？按钮点击无响应排查

我编写了一段代码，尝试通过按钮点击在当前标签页打开另一个HTML页面，但点击按钮后毫无反应，控制台也未显示任何报错信息。我使用jQuery进行开发，尝试过修改类名、设置ID等操作，但问题仍未解决。

HTML及JS代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Biograpy</title>

    <link rel="stylesheet" href="libs/bootstrap-reboot.min.css">

    <link rel="stylesheet" href="libs/bootstrap-grid.min.css">

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="css/styles.css">
</head>
<body>

    <nav class="navbar">
        <div class="container">
            <a href="#" class="navbar-brand">BIOGRAHPY</a>
            <div class="navbar-wrap">
                <ul class="navbar-menu">
                    <li><button class="button1">About me</button></li>
                    <li><button class="button2">Portfolio</button></li>
                    <li><button class="button3">Place of study</button></li>
                </ul>
                <a href="#" class="contacts">Contacts</a>
            </div>
        </div>
    </nav>
    <div class="text1" id="option">
        <p>Test</p>
    </div>
    <!-- <div class="portfolio" id="option2">Тест2</div> -->
    <script type="text/javascript" src ="C:\Users\adeni\OneDrive\Desktop\site\jquery-3.6.1.min.js">
        $('button1').click(function(){
            window.location = $(this).find('.About_me').html();
        })  
    </script>
</body>
</html>

CSS代码 #

body {
    position: relative;
    font-family: 'Noto Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #000;
    min-width: 320px;
    overflow-x: hidden;
    height: auto;
}
.navbar {
    width: 100%;
    height: 70px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, .1);
}
.navbar .container {
    height: inherit;
    display: flex;;
    justify-content: space-between;
    align-items: center;
}
.navbar-menu {
    list-style-type: none;
    padding-left: 0px;
    margin-bottom: 0px;
}
.navbar-menu li {
    display: inline-block;
}
.navbar-menu li button {
    border-radius: 60px;
    border: none;
    outline: none;
    display: inline-block;
    color: #000;
    opacity: .6;
    text-decoration: none;
    padding: 10px;
    transition: all .7s ease-in-out;
}
.navbar-menu li button:hover {
    opacity: 1;
}
.text1 {
    display: none;
}
.visible_block {
    display: flex;
}
.navbar-wrap {
    display: flex;
    flex-flow: row nowrap;
}
.contacts {
    margin-left: 25px;
    padding: 10px 30px;
    background-color: lightcoral;
    border-radius: 90px;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(255, 127, 80, .2);
    transition: all .7s ease-in;
}
.contacts:hover {
    box-shadow: 0 9px 9px rgba(255, 127, 80, .5);
    transform: scale(1.050);
    color: #000;
}
.navbar-brand {
    font-weight: : 700;
    font-size: 26px;
    text-decoration: none;
    color: #000;
    transition: all .7s ease-out;
}
.navbar-brand:hover {
    color: lightcoral;
}

问题排查及修正方案 #

1. jQuery选择器错误 #

类选择器需要以.开头，原代码中$('button1')无法匹配到类名为button1的按钮，应改为$('.button1')。

2. jQuery引用路径问题 #

使用本地绝对路径加载jQuery，浏览器可能因安全策略限制无法读取本地文件，建议改用相对路径。比如如果jQuery文件和当前HTML在同一目录下，改为：

<script src="jquery-3.6.1.min.js"></script>

3. Script标签不能混合src和内部代码 #

一个<script>标签不能同时设置src属性和写内部JS代码，必须分开：先引入jQuery，再写事件逻辑。

4. 页面跳转逻辑错误 #

原代码中$(this).find('.About_me').html()完全找不到对应元素，跳转地址未正确指定。直接将window.location.href设为目标HTML文件路径即可，比如要跳转到about-me.html，则写：

window.location.href = 'about-me.html';

修正后的完整HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Biograpy</title>

    <link rel="stylesheet" href="libs/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="libs/bootstrap-grid.min.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>

    <nav class="navbar">
        <div class="container">
            <a href="#" class="navbar-brand">BIOGRAHPY</a>
            <div class="navbar-wrap">
                <ul class="navbar-menu">
                    <li><button class="button1">About me</button></li>
                    <li><button class="button2">Portfolio</button></li>
                    <li><button class="button3">Place of study</button></li>
                </ul>
                <a href="#" class="contacts">Contacts</a>
            </div>
        </div>
    </nav>
    <div class="text1" id="option">
        <p>Test</p>
    </div>
    <!-- <div class="portfolio" id="option2">Тест2</div> -->
    
    <!-- 先引入jQuery -->
    <script src="jquery-3.6.1.min.js"></script>
    <!-- 再写事件逻辑 -->
    <script>
        $('.button1').click(function(){
            // 替换为你的目标页面路径
            window.location.href = 'about-me.html';
        });
        
        // 其他按钮同理
        $('.button2').click(function(){
            window.location.href = 'portfolio.html';
        });
        
        $('.button3').click(function(){
            window.location.href = 'study.html';
        });
    </script>
</body>
</html>

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