单击按钮时隐藏 div 并显示 div

Question

I am a total newbie of Jquery and JavaScript. I am using this code as reference: https://jsfiddle.net/6uzU6/2/

What I am trying to do is similar as the link above, which is to display a div after a corresponding button is clicked while others divs are hidden.

I was trying to modify the code to use div instead of unordered list.

The problem I am having right now is when I use Brave Browser to open the page, the divs are not hiding and no changes are made after clicking the button. While using Chrome, the page will be blank, nothing is shown.

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 %}

app.js

$('div').not(".content").hide();
$('.justClick').bind('click', function() {
    $('div').not(".content").hide();
    $('div.content').html($('div.content' + ($(this).index()+1)).html());
});

Answer 1

Not sure about your code but here's another way to do it.

Its easy to read and understand...

 $(document).ready(function(){ $(".justClicka").click(function() { $(".content1").css("display", "block"); $(".content2,.content3,.content4").css("display", "none"); }); $(".justClickb").click(function() { $(".content2").css("display", "block"); $(".content1,.content3,.content4").css("display", "none"); }); $(".justClickc").click(function() { $(".content3").css("display", "block"); $(".content1,.content2,.content4").css("display", "none"); }); $(".justClickd").click(function() { $(".content4").css("display", "block"); $(".content1,.content2,.content3").css("display", "none"); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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="justClicka" href="#">A</button> <button class="justClickb" href="#">B</button> <button class="justClickc" href="#">C</button> <button class="justClickd" href="#">D</button> </div> <div class="content"> </div> <div class="content1" style="display:none"> <h1>A</h1> <img src="{% static 'morse_logs/img/A.png' %}" alt="A" style="width:128px;height:128px;"> </div> <div class="content2" style="display:none"> <h1>B</h1> </div> <div class="content3" style="display:none"> <h1>C</h1> </div> <div class="content4" style="display:none"> <h1>D</h1> </div>

Answer 2

Page is blank because $('div').not(".content").hide() hides ALL divs except the one with the class="content" including the container and menu divs

Change it to $('div.content ~ div').hide()