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

【问题标题】：Hide divs and display div when button clicked单击按钮时隐藏 div 并显示 div
【发布时间】：2020-03-30 10:01:08
【问题描述】：

我是 Jquery 和 JavaScript 的新手。我使用此代码作为参考：https://jsfiddle.net/6uzU6/2/

我正在尝试做的与上面的链接类似，即在单击相应按钮后显示一个 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 %}

app.js

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

【问题讨论】：

标签： javascript jquery html django

【解决方案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>

【讨论】：

我有点工作，但div一旦显示就不会再次隐藏，我该如何解决？

【解决方案2】：

页面是空白的，因为 $('div').not(".content").hide() 隐藏了所有 div，除了带有 class="content" 的 div 包括 container 和 menu div

改成$('div.content ~ div').hide()

【讨论】：