javascript - Django 项目 - 使用 javascript 脚本的引导导航不起作用 - JavaScript 应该去哪里？
问题描述
我有一个 Django 项目，其中有一个简单的前端引导水平导航栏（取自这里：https ://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_ref_js_tab_js&stacked=h ）。
在其中，用户单击一个选项卡，并在单击时显示该选项卡的信息。
在这种情况下，我使用了 django 模板语言和清晰的表单在选项卡 1 中生成了一个表单。这渲染得很好，并且在格式和布局方面看起来是正确的，但是选项卡不起作用。我查看了其他 stackoverflow 问题，但没有一个特定于我所问的问题。
我假设选项卡的功能由 Javascript 代码段控制：
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
</script>
作为 Django 和前端设计的新手，我很难看到，a）我在哪里犯了错误以及需要纠正什么才能使选项卡在单击时正确运行。b) javascript 如何在 Django html 模板的整个结构中实现。
我的意思是，Javascript 通常放在“head”标签内，但在这种情况下，模板扩展了一个基本模板，其中有一个 head，所以我不确定 Javascript 应该放在哪里。例如，我是否应该在每种情况下都使用外部 Javascript 文件？什么是最佳实践？相对于“{% blocks”（开始和结束）的去向，它应该去哪里？
一个有用的答案是
a) 指出代码中的错误，以便我的选项卡可以工作 b) 稍微解释一下 JavaScript 片段的布局/结构，这些片段添加到 html/boostrap 功能，在基于 Django 的模板内部和框架内使用 Django 模板语言。
我的profile.html的整个代码如下所示
{% extends "socialmedia/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="content-section">
<div class="media">
<img class="rounded-circle account-img" src="{{ user.profile.image.url }}">
<div class="media-body">
<h2 class="account-heading">{{ user.username }}</h2>
<p class="text-secondary">{{ user.email }}</p>
</div>
</div>
<div class="container mt-3">
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#home">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu1">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu2">Tab 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu3">Tab 4</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>Tab 1</h3>
<p>Please fill in your account/profile information here.</p>
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4">Profile Information</legend>
{{u_form|crispy}}
{{p_form|crispy}}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Update....</button>
</div>
</form>
</div>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Tab 2</h3>
<p>Tab 2 information here</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Tab 3</h3>
<p>Tab 3 information will go here</p>
</div>
<div id="menu3" class="container tab-pane fade"><br>
<h3>Calendar</h3>
<p>Manage your Calendar</p>
</div>
</div>
</div>
{% endblock content %}
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
</script>
我试过的：我试过把javascript代码放在不同的地方——比如在{% endblock content %}之前和页面顶部，但都没有奏效。
更新：
我注意到上面没有添加cdn/css。添加它时，它会弄乱格式，并且单击时可以正常工作，但不正确。
更新后的代码如下。同样，我需要有关正确放置此代码块以正确格式化和功能以及 javascript 代码的建议。
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
更新了 profile.html
以下内容现在错误地呈现页面，以不合需要的方式向上移动顶部的图像以及用户名和电子邮件变量。此外，选项卡可以工作，但并不完全。酥脆的表单在每个选项卡中生成，而不仅仅是第一个选项卡，其他选项卡的内容显示在下方。
{% extends "socialmedia/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<!--- this code has been added as per the update above -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="content-section">
<div class="media">
<img class="rounded-circle account-img" src="{{ user.profile.image.url }}">
<div class="media-body">
<h2 class="account-heading">{{ user.username }}</h2>
<p class="text-secondary">{{ user.email }}</p>
</div>
</div>
<div class="container mt-3">
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#home">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu1">Tab 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu2">Tab 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#menu3">Tab 4</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>Tab 1</h3>
<p>Please fill in your account/profile information here.</p>
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4">Profile Information</legend>
{{u_form|crispy}}
{{p_form|crispy}}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Update....</button>
</div>
</form>
</div>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Tab 2</h3>
<p>Tab 2 information here</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Tab 3</h3>
<p>Tab 3 information will go here</p>
</div>
<div id="menu3" class="container tab-pane fade"><br>
<h3>Calendar</h3>
<p>Manage your Calendar</p>
</div>
</div>
</div>
{% endblock content %}
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
</script>
我还在下面包括了我的基本模板base.html（确实包括头部和主体）。
{% load static %}
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
{% if title %}
<title>Fakebook Blog Posts - {{title}}</title>
{% else %}
<title>Fakebook Blog</title>
{% endif %}
<!--this is django templating language-->
<link rel="stylesheet" href="{% static 'worldguestbook\main2.css' %}"/>
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="/">FakeBook Newsfeed</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="{% url 'socialmedia-home' %}">Home</a>
<a class="nav-item nav-link" href="{% url 'socialmedia-about' %}">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
{% if user.is_authenticated %}
<a class="nav-item nav-link" href="{% url 'post-create' %}">New Post</a>
<a class="nav-item nav-link" href="{% url 'profile' %}">Profile</a>
<a class="nav-item nav-link" href="{% url 'logout' %}">Logout</a>
{% else %}
<a class="nav-item nav-link" href="{% url 'login' %}">Login</a>
<a class="nav-item nav-link" href="{% url 'register' %}">Register</a>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{message.tags}}">
{{ message }}
</div>
{% endfor %}
{% endif %}
{% block content %}{% endblock %}
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Our Sidebar</h3>
<p class='text-muted'>You can put any information here you'd like.
<ul class="list-group">
<li class="list-group-item list-group-item-light">Latest Posts</li>
<li class="list-group-item list-group-item-light">Announcements</li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
我遇到了一个可能的答案（不是在 stackoverflow 上），它建议在基本模板中添加一个 DTL 块，如下所示：
{% block extra_js %}{% endblock extra_js %}
然后将脚本添加到 profile.html 页面中的这些标签内，可以，但它也没有。（见下面我试过的补充）
添加到base.html ...
<body>
{% block extra_js %}{% endblock extra_js %}
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
在profile.html ....
<h3>Calendar</h3>
<p>Manage your Calendar</p>
</div>
</div>
</div>
{% block extra_js %}
<script>
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});
</script>
{% endblock extra_js %}
{% endblock content %}
以上，根本不行。
但是，在向基础添加更多附加块，然后在 profile.html 中的这些块中添加 css 时，会出现与上述相同的问题。（标签是可点击的，但表单内容显示在所有标签中，并且标签内容像溢出一样在底部生成）。
为了澄清，将以下内容添加到 profile.html
{% block extra_css %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
{% endblock extra_css %}
将此添加到base.html（在头部）
<head>
{% block extra_css %}{% endblock extra_css %}