Javascript 单击按钮时隐藏div和显示div

我完全是Jquery和JavaScript的新手。我使用此代码作为参考：

我试图做的与上面的链接类似，即在单击相应的按钮后显示一个div，而其他div则被隐藏

我试图修改代码以使用div而不是无序列表

我现在遇到的问题是，当我使用Brave Browser打开页面时，div没有隐藏，单击按钮后也没有进行任何更改。使用Chrome时，页面将为空白，不会显示任何内容

tutorialIndex.html

{% extends "morse_logs/base.html" %}

{% block content %}
{% load static %}
<link rel="stylesheet" href="{% static 'morse_logs/css/style.css' %}">
<link href="{% static 'morse_logs/js/jquery-ui/jquery-ui.min.css' %}" rel="stylesheet">
<link href="{% static 'morse_logs/js/jquery-ui/jquery-ui.structure.min.css' %}" rel="stylesheet">
<link href="{% static 'morse_logs/js/jquery-ui/jquery-ui.theme.min.css' %}" rel="stylesheet">

<div class="container">
    <h1>Tutorial</h1>
</div>

<div id="menu">
    <button class="justClick" href="#">A</button>
    <button class="justClick" href="#">B</button>
    <button class="justClick" href="#">C</button>
    <button class="justClick" href="#">D</button>
</div>

<div class="content">

</div>

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



<script src="{% static 'morse_logs/js/jquery-3.4.1.min.js' %}"></script>
<script src="{% static 'morse_logs/js/jquery-ui/jquery-ui.js' %}"></script>
<script src="{% static 'morse_logs/js/app.js' %}"></script>
{% endblock content %}

---

页面是空白的，因为

$（'div'）。而不是（“.content”）.hide（）

隐藏所有div，除了带有

class=“content”

的div，包括

容器和
菜单

将其更改为
$（'div.content~div'）。hide（）
不确定您的代码，但这里有另一种方法

它很容易阅读和理解


$（文档）.ready（函数（）{
$（“.justClicka”）。单击（函数（）{
$（“.content1”）.css（“显示”、“块”）；
$（“.content2、.content3、.content4”）.css（“显示”、“无”）；
}); 
$（“.justClickb”）。单击（函数（）{
$（“.content2”）.css（“显示”、“块”）；
$（.content1.content3.content4”）.css（“显示”、“无”）；
}); 
$（“.justClickc”）。单击（函数（）{
$（“.content3”）.css（“显示”、“块”）；
$（.content1.content2.content4”）.css（“显示”、“无”）；
}); 
$（“.justClickd”）。单击（函数（）{
$（“.content4”）.css（“显示”、“块”）；
$（.content1.content2.content3”）.css（“显示”、“无”）；
});  
});

辅导的
A.
B
C
D
A.
B
C
D
我可以工作，但是一旦显示div，它就不会被再次隐藏，我如何解决它呢？
$('div').not(".content").hide();
$('.justClick').bind('click', function() {
    $('div').not(".content").hide();
    $('div.content').html($('div.content' + ($(this).index()+1)).html());
});