Скрыть div и отображать div при нажатии кнопки

Question

Я всего лишь новичок ie из Jquery и JavaScript. Я использую этот код в качестве ссылки: https://jsfiddle.net/6uzU6/2/

То, что я пытаюсь сделать, аналогично ссылке выше, которая заключается в отображении 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 %}

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

Не уверен насчет вашего кода, но вот еще один способ сделать это.

Его легко читать и понимать ...

$(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

Страница пуста, потому что $('div').not(".content").hide() скрывает ВСЕ дивы, кроме одного с class="content", включая container и menu div

Измените его на $('div.content ~ div').hide()