數據切換和數據目標未被 HTML 識別為屬性

Question

我目前正在開發一個網站，但我無法在我的代碼中識別 data-toggle 和 data-target 屬性（它們不會更改為 html 中已識別屬性的顏色）。

我的示例代碼：

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>{% block title %}FoLA^2{%endblock%}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href= "{{url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
        <style>
            .sidenav {height: 100%; /* Full-height: remove this if you want "auto" height */
                        width: 240px; /* Set the width of the sidebar */
                        position: fixed; /* Fixed Sidebar (stay in place on scroll) */
                        z-index: 1; /* Stay on top */
                        top: 0; /* Stay at the top */
                        left: 0;
                        background-color: #DCDCDC; 
                        overflow-x: hidden; /* Disable horizontal scroll */
                        padding-top: 20px;}

            .sidenav a {padding: 6px 8px 6px 16px;
                        text-decoration: none;
                        font-size: 25px;
                        color: #808080;
                        display: block;}

            .sidenav a:hover {color: #696969;}

            .jumbotron {margin-left: 240px;
            height: 175px}

            .content {margin-left: 300px}

            .form-group {width: 220px; margin-left: 10px}
        </style>
    </head>
<body>
    <div class="sidenav">
        <form>
          <div class="form-group">
            <input type="email" class="form-control" id="InputEmail1" placeholder="Ëmail address">
            </div>
          <div class="form-group">
            <input type="password" class="form-control" id="InputPassword1" placeholder="Password">
          </div>
          <button type="submit" class="btn btn-outline-secondary" style="margin-left: 75px; margin-bottom: 5px">Log In</button>
        <button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#registerModal" style="margin-left: 68px; margin-bottom: 60px">Register</button>
        <div class="modal fade" id="#registerModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                ...
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>

        </form>

        <a href="/" style="font-size: 200%"> Home </a>
        <a href="/cards/" style="font-size: 200%"> Playing Cards </a>
        <a href="/links/" style="font-size: 200%"> Links </a>
        <a href="/contact/" style="font-size: 200%"> Contact </a>


    </div>
    <div class="jumbotron">
        <h1 class="display-4"> FoLA^2 </h1>
    </div>

    <hr />
    <div class="content">
    {% block body %}
    {% endblock %}
    </div>
    <hr />


    <footer style="margin-left: 300px; position: fixed; bottom: 0">
        <p> <a href="https://dataintelligence.zuyd.nl/"> Data Intelligence Zuyd</a>; 2020</p>
    </footer>

<script type="text/javascript" src="{{url_for('static', filename='js/jquery-3.5.1.min.js') }}"></script>
<script type="text/javascript" src="{{url_for('static', filename='js/popper.min.js') }}"></script>
<script type="text/javascript" src="{{url_for('static', filename='js/bootstrap.min.js') }}"></script>
</body>
</html>

我按順序導入了 JQuery、Popper 和引導程序，但我仍然無法讓我的代碼識別這些屬性（我認為還有一些來自 jQuery 的其他屬性。

這是我的編輯器中的樣子：

編輯器截圖

我已經瀏覽了大約十幾個涉及這兩個屬性的其他答案，但我找不到適用於我的解決方案。

任何幫助將不勝感激！

Answer 1

這實際上沒什么大不了的，當你運行它時它不會在你的代碼中拋出任何錯誤。

數據屬性在HTML5中引入，因此您不需要像jQuery或Popper這樣的庫。 它可以在本地現代瀏覽器上正常工作。

問題是，您的編輯器與HTML5不兼容。 似乎您正在使用Notepad++ 。

我建議你這樣做，

更新您的編輯器
使用一些高級IDEs / Editors ，例如VS Code 、 Atom和Sublime

Answer 2

我想，你不需要在調用模態時添加'#'！！！！

數據切換和數據目標未被 HTML 識別為屬性

問題描述

2 個解決方案

解決方案1
0 2020-06-08 10:11:25

解決方案2
0 2020-06-08 15:26:25

數據切換和數據目標未被 HTML 識別為屬性

問題描述

2 個解決方案

解決方案1 0 2020-06-08 10:11:25

解決方案2 0 2020-06-08 15:26:25

解決方案1
0 2020-06-08 10:11:25

解決方案2
0 2020-06-08 15:26:25