页面加载时设置导航栏Button1默认激活，jQuery代码不生效问题求助

首先得指出你代码里的核心问题：你写的jQuery选择器$('aheader1')是错误的——你的Button1对应的a标签ID是aheader11，而且选择ID元素必须在前面加#符号，所以正确的初始激活代码应该是$('#aheader11').addClass('active')。

接下来我们完善整个功能，实现页面加载时Button1默认激活，点击其他按钮自动切换激活状态的效果，具体步骤如下：

1. 修正初始激活代码 #

把你原来的代码替换成以下内容，确保页面加载完成后再执行操作：

$(document).ready(function() {
    // 页面加载完成后，给Button1添加激活类
    $('#aheader11').addClass('active');
});

2. 添加点击切换逻辑 #

在上面的代码基础上补充点击事件处理，实现激活状态的切换：

$(document).ready(function() {
    // 初始激活Button1
    $('#aheader11').addClass('active');

    // 给所有导航按钮绑定点击事件
    $('.small_wrapper1 a').click(function(e) {
        e.preventDefault(); // 阻止a标签默认跳转行为（如果不需要跳转可以保留）
        // 先移除所有导航按钮的激活类
        $('.small_wrapper1 a').removeClass('active');
        // 给当前点击的按钮添加激活类
        $(this).addClass('active');
    });
});

3. 确保CSS样式生效 #

你的.active样式需要能覆盖按钮的默认样式，比如可以这样写：

/* 导航按钮默认样式 */
.small_wrapper1 th a {
    display: inline-block;
    padding: 8px 16px;
    background-color: #eee; /* 默认灰色背景 */
    color: #666;
    text-decoration: none;
    cursor: pointer;
}

/* 激活状态样式 */
.small_wrapper1 th a.active {
    background-color: white; /* 激活时白色背景 */
    color: #222;
    font-weight: bold;
}

额外小建议 #

你当前用<th>标签来包裹导航按钮其实不太合适，<th>是表格的表头单元格，更推荐用<div>这类语义化标签来构建导航栏，比如：

<div class="wrapper">
    <div class="small_wrapper1">
        <div class="nav-item"><a id="aheader11">Button1</a></div>
        <div class="nav-item"><a id="aheader21">Button2</a></div>
        <div class="nav-item"><a id="aheader31">Button3</a></div>
    </div>
</div>

这样结构更合理，后续样式和JS维护起来也更方便~

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