Question

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

我想做的事情与上面的链接类似，它是在单击相应按钮而隐藏其他div之后显示div。

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

我现在遇到的问题是，当我使用“勇敢的浏览器”打开页面时，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()隐藏了所有div，但带有class="content"的div除外，其中包括container和menu divs

将其更改为$('div.content ~ div').hide()

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

2 个答案: