jQuery实现点击按钮切换Div显示异常，求助排查浏览器兼容问题

咱们先拆解下你遇到的问题根源，再一步步解决：

核心问题点 #

1. 初始隐藏逻辑错误：你的代码$('div').not(".content").hide();会选中页面上所有div，包括菜单容器#menu和标题容器.container——这直接导致Chrome里页面空白（所有可见元素都被隐藏了），Brave里也因为元素被错误隐藏，按钮点击事件无法正常触发。
2. DOM加载顺序问题：JS代码没有包裹在DOM就绪事件中，当脚本执行时，页面上的按钮和内容div可能还没完全加载，导致选择器找不到元素，点击事件绑定失败。
3. 按钮的无效属性：button元素不需要href属性，这是链接标签<a>的专属属性，多余的属性虽然不会报错，但没必要保留。

修复步骤 #

1. 给内容块统一类名（可选但更规范） #

给content1到content4都加上一个统一的类（比如.content-block），这样后续选择器更清晰，避免误操作其他div：

<div class="content-block content1">
<h1>A</h1>
<img src="{% static 'morse_logs/img/A.png' %}" alt="A" style="width:128px;height:128px;">
</div>
<div class="content-block content2">
<h1>B</h1>
</div>
<div class="content-block content3">
<h1>C</h1>
</div>
<div class="content-block content4">
<h1>D</h1>
</div>

2. 修正JS代码，包裹在DOM就绪事件中 #

修改app.js，确保代码在DOM完全加载后执行，同时修正隐藏逻辑：

$(document).ready(function() {
  // 初始只隐藏内容块，保留菜单和标题容器
  $('.content-block').hide();
  
  // 用on绑定点击事件（比bind更推荐，兼容新版本jQuery）
  $('.justClick').on('click', function() {
    // 先隐藏所有内容块
    $('.content-block').hide();
    // 获取当前按钮的索引（从0开始），对应content1到content4
    const targetIndex = $(this).index() + 1;
    const targetContent = $('.content' + targetIndex);
    // 把目标内容加载到.content容器里
    $('.content').html(targetContent.html());
  });
});

3. 移除按钮的无效href属性 #

把按钮的href="#"去掉，简化成：

<button class="justClick">A</button>
<button class="justClick">B</button>
<button class="justClick">C</button>
<button class="justClick">D</button>

额外优化建议（可选） #

如果不想依赖按钮索引（比如后续调整按钮顺序会出问题），可以给每个按钮加上data-target属性，直接指定对应的内容块：

<button class="justClick" data-target=".content1">A</button>
<button class="justClick" data-target=".content2">B</button>
<button class="justClick" data-target=".content3">C</button>
<button class="justClick" data-target=".content4">D</button>

然后JS代码改成：

$(document).ready(function() {
  $('.content-block').hide();
  
  $('.justClick').on('click', function() {
    $('.content-block').hide();
    const targetSelector = $(this).data('target');
    const targetContent = $(targetSelector);
    $('.content').html(targetContent.html());
  });
});

这样不管按钮顺序怎么变，都能精准对应到目标内容块，逻辑更健壮。

现在重新测试，应该就能正常工作了：初始页面会显示菜单和标题，点击按钮后，对应的内容会加载到.content容器里，其余内容块保持隐藏。

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